PDA

View Full Version : How to make Combobox case insensitive for value field?



bforbhavin
20 Nov 2013, 1:41 PM
How can I make combo box's value field case insensitive?

I copied following example from http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.ComboBox. Let's say if I set value 'AK' then combo will display Alaska properly. But if I set value 'ak' then combo will show 'ak' rather than 'Alaska'.


// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});


// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
itemId: 'mycombo',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});


Ext.ComponentQuery.query('#mycombo')[0].setValue('ak');

Gary Schlosberg
22 Nov 2013, 12:07 PM
If you are in a position to upgrade to 4.2.1, you could use this:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-caseSensitive

greg.barry
22 Nov 2013, 1:19 PM
I'm not sure what your requirements are but you could also do something like this:



Ext.onReady(function () { var store = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});


var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});


var lcState = 'al',
data = store.data.items;


Ext.each(data, function(item, index) {
var storeAbbr = item.data.abbr;


if (storeAbbr.toLowerCase().indexOf(lcState) != -1){
Ext.ComponentQuery.query('combobox')[0].setValue(lcState.toUpperCase());
}
});
});

Thanks!
Greg

bforbhavin
7 Jan 2014, 1:12 PM
If you are in a position to upgrade to 4.2.1, you could use this:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-caseSensitive

I tried this attribute on ExtJS 4.2.2 but it doesn't work. caseSensitive is false by default. I tried to set value following way in my original example given above but it doesn't show me Alaska. Instead, it shows me aK in the dropdown. I believe Code Editor in ExtJS 4.2.2 API documentation is using correct version of ExtJS.

Ext.ComponentQuery.query('#mycombo')[0].setValue('aK');