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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi