I want to add and empty item (display value is blank, item height is kept as normal) to an Ext.form.ComboBox. I refered 2 links below to configure my combobox, but it still
this.abcCombo = new Ext.form.ComboBox({
name : 'abcCombo',
hiddenName : 'abcCombo-id',
fieldLabel : "My Combobox",
width : 250,
editable : false,
forceSelection : true,
mode : 'local',
triggerAction : 'all',
valueField : 'id',
displayField : 'fullName',
store : new Ext.data.JsonStore({
fields : ['id', 'fullName']
}),
tpl : '{fullName} '
//make sure to add this
//if not added, empty item height is very small
listConfig : {
getInnerTpl: function () {
return '{fullName}
';
}
}
});
on initializing the component, you can do this (on controller):
populateMyComboBox([yourComboBoxComponent], true);
on the populate function:
populateMyComboBox : function(comboBox, insertEmpty) {
var list;
if (insertEmpty) {
list.push({id : 0, fullName : ''});
}
var mStore = Ext.create('Ext.data.Store', {
fields: ['data', 'label'],
data : list.concat([real_data])
}),
comboBox.bindStore(mStore);
}