PDA

View Full Version : Cascading combobox using extjs3



madipally
27 Sep 2012, 12:05 AM
Hi,

Myself is an extjs user since few months. I am working on cascading combo box , i am almost done but with small problem.

I am having 2 combo boxes, viz., Country, State. I am able to populate country combo box contents from the database successfully. following is the code snippet for that.

var country_store = new Ext.data.SimpleStore({
autoLoad: true,
pruneModifiedRecords: true,
fields: ['id', 'name'],
url: "/get_countries",
});

var ValueForm = new Ext.form.FormPanel({
title: 'Giving a Value to Command',
frame:true,
labelAlign: "top",
autoScroll: true,
bodyStyle: 'position:relative;',
items: [{
xtype: "combo",
id: "cmb_country",
width: 150,
name:"cmb_country",
hiddenname:"cmb_country",
fieldLabel: "Value",
minChars:2,
triggerAction: "all",
forceSelection: true,
displayField: "name",
valueField: "name",
typeAhead:true,
mode:'remote',
allowBlank: false,
emptyText: "Select a Value",
store: testdata_table_store,
listeners:
{
'select' : function(cmb, rec, idx)
{
state = Ext.getCmp('cmb_state');
state.clearValue();
state.store.load({
params: {'country': Ext.getCmp('cmb_country').getValue() }
});
state.show();
state.enable();
}
},
},
}); //End ValueForm

When , i am selecting a country from the combo box, i am able to see the concerned country states in firebug, but these states are not populating in State combo box. If i am again selecting a country for the second time, then states are populating in the state combo box.

Following is the code snippet for the state combobox

var state_store = new Ext.data.SimpleStore({
pruneModifiedRecords: true,
fields: ['id', 'name'],
url: "/get_states",
});

items: [{
xtype: "combo",
id: "cmb_state",
width: 150,
name:"cmb_state",
hiddenname:"cmb_state",
fieldLabel: "Value",
minChars:2,
triggerAction: "all",
forceSelection: true,
displayField: "name",
valueField: "name",
typeAhead:true,
mode:'remote',
allowBlank: false,
emptyText: "Select a Value",
store: state_store,
},
},

Please suggest me , how to populate the states for the first request itself.

Thanks
Naveen Kumar Madipally

madipally
27 Sep 2012, 3:24 AM
Hi Folks,

I am able to solve the issue on my own just by replacing following code

state.store.load({
params: {'country': Ext.getCmp('cmb_country').getValue() }
});

state.store.reload({
params: {'country': Ext.getCmp('cmb_country').getValue() }
});

leidsondias
4 Oct 2012, 4:18 AM
Hi, follows an example so you can see:



//STORE COUNTRY
this.stCountry = new Ext.data.JsonStore({
url : 'controller/Controller.php',
root : 'results',
autoLoad : true,
totalProperty : 'total',
autoDestroy : true,
baseParams : {acao: 'action', start:0, limit:10},
fields : [
{name: 'id_country', type: 'int'},
{name: 'name, type: 'string'}
]
});

//COMBO COUNTRY
this.cbbCountry = new Ext.form.ComboBox({
fieldLabel : 'Country',
mode : 'remote',
resizable : true,
editable : false,
store : this.stCountry,
pageSize : 10,
valueField : 'id_country',
displayField : 'name',
triggerAction : 'all',
loadingText : 'Searching...',
emptyText : 'Select...',
forceSelection : true,
listeners : {
scope : this,
select : function(combo){
this.stState.setBaseParam('idState', combo.getValue());
this.stState.load();
//OR
/* this.stState.load({params: {idState: combo.getValue()}});*/
}
}
});

//STORE STATE
this.stState = new Ext.data.JsonStore({
url : 'controller/Controller.php',
root : 'results',
totalProperty : 'total',
autoDestroy : true,
baseParams : {acao: 'action', start:0, limit:10},
fields : [
{name: 'id_state', type: 'int'},
{name: 'name', type: 'string'}
]
});

//COMBO STATE
this.cbbState = new Ext.form.ComboBox({
fieldLabel : 'State',
mode : 'local',
editable : false,
resizable : true,
store : this.stState,
displayField : 'name',
pageSize : 10,
valueField : 'id_state',
typeAhead : true,
triggerAction : 'all',
loadingText : 'Searching...',
forceSelection : true,
emptyText : 'Select...',
selectOnFocus : true
});


Note: I prefer calling the function in listener, instead to declare the function in listener. Example:



//COMBO COUNTRY
listeners : {
scope : this,
select : this._loadStates
}


//FUNCTION
_loadStates: function(combo) {
this.stState.setBaseParam('idState', combo.getValue());
this.stState.load();
//OR
/* this.stState.load({params: {idState: combo.getValue()}});*/
}



Sorry if my english is not so good :)

Leidson Dias,