Search code examples
javascriptextjsextjs4

Can´t load store of a combo in ExtJS4


I can´t load the store data when the view is loaded. This is my store: (strEstadosMtoOrganismos.js)

Ext.define('TelicitaApp.store.filtros.strEstadosMtoOrganismos', {
extend: 'Ext.data.Store',
model:  'TelicitaApp.model.filtros.mdlEstadosMtoOrganismos',
autoLoad: false,
proxy: {
    type: 'ajax',
    api: {read: './data/php/filtros/Tmc_EstadosMtoOrganismos.php?despliegue='+TelicitaApp.Settings.despliegue},
    reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total',
                successProperty: 'success'
    }
}
});

This is my view: (viewGridMtoOrganismos.js)

Ext.define('TelicitaApp.view.mantenimientos.organismos.viewGridMtoOrganismos', {
extend: 'Ext.grid.Panel',
alias: 'widget.viewGridMtoOrganismos',
requires: [
],
initComponent: function() {
    var toolbar1 = {
            xtype : 'toolbar',
            dock : 'top',
            items: [
                    {
                        iconCls:'limpiar-icon', text:'Limpiar', handler:  function()    {},
                    },
                    '->',
                    {
                        iconCls:'refresh', text:'Recargar', handler:  function()    {},
                    }
            ]
    };

    var toolbar2 = {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                    {text:'<span style="color:#C85E00;">Estado</span>'},
                    {
                        xtype: 'combo',
                        value: 'Todos',
                        queryMode: 'remote',
                        triggerAction: 'all',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strEstadosMtoOrganismos'
                    }
            ]
    }   

    Ext.apply(this, {
        frame: true,
        bodyPadding: '5 5 0',
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        forceFit: true,
        height: 300,
        stripeRows: true,
        loadMask: true,
        tbar: {
            xtype: 'container',
            layout: 'anchor',
            defaults: {anchor: '0'},
            defaultType: 'toolbar',
            items: [
                    toolbar1,toolbar2
            ]           
        },
        columns: [
                  {header:'<span style="color:blue;">Id</span>', xtype: 'numbercolumn',format:'0',  width:35, sortable: true},
        ]
    });
    this.callParent(arguments);
}
});

This is my controller: (ctrlMtoOrganismos.js)

Ext.define('TelicitaApp.controller.ctrlMtoOrganismos', {
extend: 'Ext.app.Controller',
models:[
        'mantenimientos.organismos.mdlMtoOrganismos',
        'filtros.mdlEstadosMtoOrganismos'

],
stores:[
        'mantenimientos.organismos.strMtoOrganismos',
        'filtros.strEstadosMtoOrganismos'
],
views: [ 
        'mantenimientos.organismos.viewModuloMtoOrganismos'
],
refs: [
],
init: function() {
    this.control({

    });
},
onLaunch: function() {

},
});

If I set the autoload property in the store to true,it load the data when the app launch.But I want to load the data when the view is loaded. Once the view is loaded,if i expand the combo it launch the php file taht fills the combo,but I want it to load the data automatically after the view is loaded,not when you expand the combo.


Solution

  • Replace

        this.callParent(arguments);
    }
    

    with

        this.callParent(arguments);
        this.down('combo').getStore().load();
    }
    

    and you're good to go.