[SOLVED PARTLY] Mixing labelAlign and trouble with width...

Published by: rose 2009-01-07

enart.chinamulti.com - Archives 20070601 - Powered by chcms::
[SOLVED PARTLY] Mixing labelAlign and trouble with width It would be great if it give labeAlign to the item directly I'd like a form with input text
http://enart.chinamulti.com/recentpostarticle.php?d=20070601HOME

It would be great if it give labeAlign to the item directly...

I'd like a form with input text and textarea to look like this:

name:
comment:

Is there any way to do this? Because otherwise the textarea gets very narrow...

Also I have trouble with "defaults: {width: 230}" and "width:400". The textarea uses the default over the defined with, which works just fine with the textfield

Thanks a lot...

From the example:

var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 550,
defaults: {width: 230},

FLTK 1.0.11 Programming Manual::
File Format: Adobe PostScriptUnder X this returns 2 if the rectangle is partially clipped, and 1 if it is entirely redrawing, but that can be solved by using a Fl_Double_Window.
http://www.fltk.org/doc-1.0/fltk.ps.gzHOME

defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
width:350
}, new Ext.form.TextArea({
allowBlank:false,
fieldLabel:"Comment",
value:"My Textrnmore text",
width:400

Ext JS Forums - Search Results::
[SOLVED PARTLY] Mixing labelAlign and trouble with width Views: 163. Posted By Condor · Here is the same form without special.
http://www.yui-ext.net/forum/search.php?searchid=6215200HOME

Ext: Help - Page 933 - Ext JS Forums::
[SOLVED PARTLY] Mixing labelAlign and trouble with width KajaSheen · 01-18- 2008 06:19 PM. 01-19-2008 08:15 AM by Condor Go to last post
http://www.yui-ext.net/forum/forumdisplay.php?f=9&order=desc&page=933HOME

})

],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);

Here is the same form without special markup:

var simple = new Ext.FormPanel({
url:'save-form.php',
frame:true,
title:'Simple Form',
bodyStyle:'padding:5px 5px 0',
width:650,
defaults:{
layout:'form',
defaultType:'textfield',
labelWidth:75,
},
items:[{
items:[{
fieldLabel:'Name',
width:320
}]
},{
labelAlign:'top',
items:[{
xtype:'textarea',
allowBlank:false,
fieldLabel:"Comment",
value:"My Textrnmore text",
width:400
}]
}],
buttons:[{
text:'Save'
},{
text:'Cancel'
}]
});
simple.render(document.body);

Ok, a couple of hours later I figured out a way to display my textfield like I want to, but it is far from perfect and the width problem remains...

Added an itemCls and a cls to the textArea. And a couple of styles to the file.

var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
width: 650,

defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
width: 325,
}, new Ext.form.TextArea({
allowBlank:false,
fieldLabel:"Comment",
value:"My Textrnmore text",
width: 400,
itemCls: 'ux-label-top',
cls: 'textarea'
})

],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);

.ux-label-top label{width:auto;float:none;clear:none;display:inl ine;margin-bottom:4px;position:static;}
.ux-label-top .x-form-element{padding-left:0 !important;padding-top:4px;}
.ux-label-top .x-form-item{padding-bottom:4px;}
.ux-label-top .textarea {width: 397px !important; height: 200px !important;}