Cascading combobox using extjs3

[madipally]

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]

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]

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,