PDA

View Full Version : how can we set the auto width for the Drop down list of combobox



vivekajm
22 Feb 2010, 10:22 PM
Hi,
can anyone knows how to set the Auto width for the dropdown list of combobox , for example if in a combobox list length of one text is more than the width of list, then I need to increase the width of list to show the complete text.

var searchFieldCombo = new Ext.form.ComboBox( {
id : 'address',
name : 'address',
maxLength:'75',
store : searchFieldStore,
mode : 'remote',
displayField : 'name',
valueField : 'id',
iconClsField: 'icon_airplane',
cls:'destHlpTxt',
listClass:'suggestiveTxt',
plugins:new Ext.ux.plugins.IconCombo(),
minChars:'3',
height : 26,
width:365,
hideTrigger : true,
tabIndex:'2',
emptyText : 'Enter City, Address, Airport, Point of Interest',
forceSelection : false,
selectOnFocus : true,
triggerAction : 'all'

});

Thanks in advance

maquejp
22 Feb 2010, 11:44 PM
property listWidth




Hi,
can anyone knows how to set the Auto width for the dropdown list of combobox , for example if in a combobox list length of one text is more than the width of list, then I need to increase the width of list to show the complete text.

var searchFieldCombo = new Ext.form.ComboBox( {
id : 'address',
name : 'address',
maxLength:'75',
store : searchFieldStore,
mode : 'remote',
displayField : 'name',
valueField : 'id',
iconClsField: 'icon_airplane',
cls:'destHlpTxt',
listClass:'suggestiveTxt',
plugins:new Ext.ux.plugins.IconCombo(),
minChars:'3',
height : 26,
width:365,
hideTrigger : true,
tabIndex:'2',
emptyText : 'Enter City, Address, Airport, Point of Interest',
forceSelection : false,
selectOnFocus : true,
triggerAction : 'all'

});

Thanks in advance

vivekajm
23 Feb 2010, 1:02 AM
Hi ,
Thanks for Reply,but listWidth set the default width of combobox , i want to set the AutoWIdth of dropdown list ,The default width for dropdown list must be equal to the width of combobox ,but when any text whose width is more than width of combobox then the width of list must be increase accordingly.

tobiu
23 Feb 2010, 3:15 AM
hi vivekajm,



listWidth : Number
The width (used as a parameter to Ext.Element.setWidth) of the dropdown list (defaults to the width of the ComboBox field). See also minListWidth


maquejp was right with his config. if not set, the dropdown-list has the width of the combo. if set, you can make it wider.

resizing the width of the dropdown (to be more precise of the Ext.DataView) is possible. you can resize it manually with:

myCombo.view.setWidth()

to let it resize according to the content, a DataView has a config

autoWidth which could work. but you can't specify it with the combo-configs (+1 for feature-request adding viewConfig to comboBox). so, you would have to overwrite the initList-method of the combo, this part:



this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item',
emptyText: this.listEmptyText,
deferEmptyText: false
,autoWidth: true
});



kind regards,
tobiu

wp.joju
7 Jul 2010, 2:28 AM
doesn't seem to work for IE