1. #1
    Sencha User madipally's Avatar
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    madipally is on a distinguished road

      0  

    Default Cascading combobox using extjs3

    Cascading combobox using extjs3


    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

  2. #2
    Sencha User madipally's Avatar
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    madipally is on a distinguished road

      0  

    Default Cascading Combo boxes not loading for first time

    Cascading Combo boxes not loading for first time


    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() }
    });

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    leidsondias is on a distinguished road

      0  

    Default


    Hi, follows an example so you can see:

    Code:
    //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:

    Code:
    //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,

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar