PDA

View Full Version : increasing the width of the 'labelField' of the 'textField'



gill200s
17 Jan 2011, 8:18 AM
Hi everyone, this is my first post and have tried searching for this question in the forum and couldnt find it. I would appreciate any help on this. <br>
I have a text field (enclosed in red box, see screeshot)whose field label is pretty long and field label gets rendered in two lines. I want the field label in a single line. I am using form layout. here is the code
<code>
xtype: 'form',
id: 'advanced_search',
frame: true,
buttonAlign: 'left',
// bodyStyle: 'padding:10px;',
items:[{
xtype: 'fieldset',
title: 'Module',
border: false,
items: [{
hideLabel: true,
xtype: 'checkboxgroup',
allowBlank: false,
msgTarget: 'under',
items: [
{boxLabel: 'Outage', name: 'outage_checkbox'},
{boxLabel: 'Parent tickets', name: 'parent_checkbox', checked: false},
{boxLabel: 'Known Issues', name: 'known_checkbox'},
]
}]
},{
layout: 'hbox',
xtype: 'fieldset',
border: false,
title: 'Search Options',
items:[{
xtype: 'fieldset',
border: false,
defaultType : 'textfield',
items: [{
fieldLabel: 'Has any of the words',
width: 150,
minLength: 2,
maxLength: 100,
name: 'all_words'
},{
fieldLabel: 'Has all the words',
width: 150,
minLength: 2,
maxLength: 100,
name: 'any_words'
},{
fieldLabel: 'Doesn\'t have',
width: 150,
minLength: 2,
maxLength: 100,
name: 'none_words'
}]
},{
xtype: 'fieldset',
border: false,
defaultType : 'textfield',
items: [{
fieldLabel: 'Posted by',
emptyText: 'Anybody',
store: ['value1','value2'],
/* store: new Ext.data.JsonStore({
id:'id',
root:'rows',
fields: [{
name: 'firstname',
type: 'string'
},{
name: 'lastname',
type: 'string'
}],
url: 'index.php',
baseParams: {
cmd:'get_namelist'
}
}),*/
mode: 'remote',
xtype: 'combo',
triggerAction: 'all',
typeAhead: true,
width: 150,
name: 'post_by'
},{
xtype: 'datefield',
fieldLabel: 'Since this date',
width: 150,
name: 'since_date'
},{
xtype: 'datefield',
fieldLabel: 'Until this date',
width: 150,
name: 'until_date'
}]
}]
},{
xtype: 'fieldset',
title: 'Category',
border: false,
items: [{
xtype: 'checkboxgroup',
hideLabel: true,
allowBlank: false,
msgTarget: 'under',
items: [
{boxLabel: 'Internet', name: 'internet_checkbox'},
{boxLabel: 'Max', name: 'max_checkbox', checked: false},
{boxLabel: 'Wireless', name: 'wireless_checkbox'},
{boxLabel: 'Wireline', name: 'wireline_checkbox'},
{boxLabel: '4135', name: '4135_checkbox'}
]
}]
}]
</code>

The screenshot of the output is

file:///C:/DOCUME%7E1/gills1/LOCALS%7E1/Temp/moz-screenshot.pngfile:///C:/DOCUME%7E1/gills1/LOCALS%7E1/Temp/moz-screenshot-1.png
24324

THanks

Condor
17 Jan 2011, 8:22 AM
Configure the container with form layout (= the fieldset) with labelWidth:150.

gill200s
17 Jan 2011, 8:26 AM
Thanks Condor,
problem solved, although i do feel like i am an ***** lol, I never knew we had a fieldwidth attribute