ExtJS - dependent combobox

Question

i had a problem with the loadData() function in my dependent combobox. I'm doing a desk where I can create shortcuts and modify them.

The problem occurs when trying to modify the shortcut and pass "Tab con URL" to "Tab con Info de sistema". Detects an error in the loadData function when I choose the combo with id="sistemas". No data load brings me function GetMenu in the store. The data that returns the GetMenu function isn't loaded to the store.

I dont know why. Here is my code, can anyone lend me a hand?

The store:

var cmb_menu = new Ext.data.SimpleStore({
            fields : ['id', 'menu'],
            data   : menu
            });

Code:

    {
      xtype    : "radio",
      boxLabel : "Tab con Info de sistema",
      value    : "oneway",
      tabIndex : 1,
      id       :'IdCheck',
      name     : "rt_rt_radiobutton",
      listeners: {
      check: function(){
        Ext.getCmp("sistemas").enable();
        Ext.getCmp("iconUrl").disable();
        }
      }
   },  


    {
      xtype:"radio",
      boxLabel:"Tab con URL",
      value:"twoway",
      id: 'idCheckedUrl',
      tabIndex:1,
      name:"rt_rt_radiobutton",
      listeners: {
          check: function (ctl, val) { 
                if(val){
                    Ext.getCmp("iconUrl").enable();
                    Ext.getCmp("sistemas").disable();
                    Ext.getCmp("sistemas").clearValue();
                    Ext.getCmp("menus").clearValue();
                    Ext.getCmp("items").clearValue();
                    Ext.getCmp("subMenu").clearValue();
                    Ext.getCmp("menus").disable();
                    Ext.getCmp("items").disable();
                    Ext.getCmp("subMenu").disable();
                        }
                         }
                    }
     },
    {
     xtype        : 'combo',
     store        : cmb_sistemas,
     hiddenName   : 'id_sistema',
     allowBlank   : false, 
     value       : sistemId,
     mode         : 'local',
     fieldLabel   : 'Sistemas',
     disabled     : true,
     name         : 'sistemas',
     id           : 'sistemas',
     anchor       : '90%',
     displayField : 'sistema',
     triggerAction: 'all',  //rdiaz
     emptyText    : 'Seleccione un sistema',//rdiaz
     editable     : false, //rdiaz
     valueField   : 'id',
     listeners    : {
        select: function (){
            idSistema = this.getValue();
                nombreSistema= this.getRawValue();
                var menu = Ext.getCmp("menus");
                iMenu = getMenu(idSistema);
                //menu.store.clear();
                menu.store.loadData(iMenu, true);
                menu.enable();
                var items = Ext.getCmp("items");    
                //menu.clearValue();    
                //menu.store.removeAll();//rdiaz        
                items.clearValue();
                items.disable();
                var subMenues= Ext.getCmp("subMenu");   
                subMenues.clearValue();
                subMenues.disable();
                }                                            
            }
    },
    {
    xtype        : 'combo',
    store        : cmb_menu,
    hiddenName   : 'id',
    valueField   : 'id',
    value        : menuID, 
    mode         : 'local',
    allowBlank   : false,
    fieldLabel   : 'menu',
    disabled     : true,
    triggerAction: 'all',//rdiaz
    emptyText    : 'Seleccione un menu',//rdiaz
    editable     : false, //rdiaz
    name         : 'menus',
    id           : 'menus',
    anchor       : '90%',
    displayField : 'menu',
    listeners    : {
        select: function () {                                           
                                                        selectedMenu = this.getValue();
            Ext.getCmp("subMenu").clearValue(); 
            //alert(selectedMenu);
            idSistema = Ext.getCmp("sistemas").getValue();  
            mItems    = getItemsMenu(selectedMenu, idSistema);
            if($.trim(selectedMenu) == "000060000000010000"){
                var subMenues= Ext.getCmp("subMenu");   
                subMenues.store.loadData(mItems);
                subMenues.enable();
                var items    = Ext.getCmp("items");
                items.clearValue();
                items.enable();
                }else{
                    var subMenues= Ext.getCmp("subMenu");   
                    subMenues.store.loadData(mItems);
                    subMenues.disable();
                    var items    = Ext.getCmp("items"); 
                    //alert(mItems);
                    items.store.loadData(mItems);
                    items.clearValue();
                    items.enable();
                                                            }
                                                        }

        }

},

Thank you!

Answer 1

Store load methods are asynchronous meaning that the code after loadData is executed immediately but the data is not yet loaded. You need to either perform the rest of your logic in the call back of loadData or separately in a load event listener.