/* Date store */
var dataStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: Ext.SERVER_URL + 'get_data',
method: 'post'
}),
listeners :{
load:function() {
/**
/* The code block at the end labeled
/* 'And select a value after load store' can be written here.
*/
}
},
fields: ['id', 'name'],
totalProperty: 'totalCount',
root: 'data'
});
/* Suppose data returned as */
{totalCount: 2, data: [{"id":1,"name":"First Item"},{"id":2,"name":"Second Item"}] }
/* Combobox initialize */
{
xtype: 'combo',
id: "domId",
fieldLabel: 'Data Name',
hiddenName: 'cb_data',
store: dataStore,
displayField: 'name',
labelSeparator :'',
valueField: 'id',
typeAhead: true,
autoSelect: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
allowBlank: true,
blankText: 'Select status',
editable: false
}
/* And select a value after load store */
var combo = Ext.getCmp("domId");
combo.getStore().on(
"load",function() {
var value = 2;
/* Set your value to select in combobox */
/* This will select with id = 2 and label = 'Second Item'.
if(value == 0) { /* Default selection */
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('id'));
} else {
combo.setValue(value);
}
},
this,
{
single: true
}
);
Showing posts with label ExtJs ComboBox. Show all posts
Showing posts with label ExtJs ComboBox. Show all posts
Thursday, August 8, 2013
Extjs combobox:How to set user selected value as the default selected value
Thursday, November 29, 2012
ExtJS ComboBox with local store and change action listener.
new Ext.form.ComboBox({
fieldLabel: '',
id: 'searchtypeforcontacts',
name: 'searchtype',
x:200,
labelSeparator :'',
editable: false,
store: new Ext.data.SimpleStore({
fields: ['id', 'header'],
data: [
['id', 'Contact Id'],
['first_name', 'Given Name'],
['email', 'Email'],
['country', 'Country'],
['state', 'State'],
['suburb_city', 'Suburb/City'],
['post_zip_code', 'Post/Zip Code']
]
}),
displayField: 'header',
valueField: 'id',
emptyText:'Search Contacts',
typeAhead: true,
mode: 'local',
anchor: '40%',
triggerAction: 'all',
allowBlank: false,
selectOnFocus: true,
blankText: 'Select search type',
listeners:{
'select':function() {
if (this.value == 'status') {
//statusCombo.show();
searchText.hide();
$(".customerSearch").css({'margin-left':'210px','width':'auto'});
} else {
//statusCombo.hide();
searchText.show();
$(".customerSearch").removeAttr("style").css("width:auto;");
}
}
}
})
fieldLabel: '',
id: 'searchtypeforcontacts',
name: 'searchtype',
x:200,
labelSeparator :'',
editable: false,
store: new Ext.data.SimpleStore({
fields: ['id', 'header'],
data: [
['id', 'Contact Id'],
['first_name', 'Given Name'],
['email', 'Email'],
['country', 'Country'],
['state', 'State'],
['suburb_city', 'Suburb/City'],
['post_zip_code', 'Post/Zip Code']
]
}),
displayField: 'header',
valueField: 'id',
emptyText:'Search Contacts',
typeAhead: true,
mode: 'local',
anchor: '40%',
triggerAction: 'all',
allowBlank: false,
selectOnFocus: true,
blankText: 'Select search type',
listeners:{
'select':function() {
if (this.value == 'status') {
//statusCombo.show();
searchText.hide();
$(".customerSearch").css({'margin-left':'210px','width':'auto'});
} else {
//statusCombo.hide();
searchText.show();
$(".customerSearch").removeAttr("style").css("width:auto;");
}
}
}
})
Subscribe to:
Posts (Atom)