将存储负载从视图更改为控制器 ExtJS4答案

【问题标题】：Change store load from view to controller ExtJS4将存储负载从视图更改为控制器 ExtJS4
【发布时间】：2016-02-18 20:30:02
【问题描述】：

我有下一个代码。我的观点：

Ext.define('Test.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',
                        id: 'comboEstados',
                        value: 'Todos',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strEstadosMtoOrganismos'
                    },
                    {text:'CCAA'},
                    {
                        xtype: 'combo',
                        id: 'comboCCAA',
                        value: 'Todas',
                        queryMode: 'local',
                        editable: false,
                        displayField: 'label',
                        valueField: 'value',
                        store: 'filtros.strComunidadesAutonomas',
                        matchFieldWidth: false
                    },
            ]
    }   

    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);
    Ext.getCmp('comboEstados').getStore().load();
}
});

我的控制器：

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

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

}
});

实际上我在视图中加载了商店，但我认为最好将它加载到控制器 MVC 中。但我不希望商店在应用程序启动时加载，我想从控制器加载商店(Ext.getCmp('comboEstados').getStore().load();)加载视图时。

【问题讨论】：

¿您使用的是什么版本的 ExtJS？

标签： javascript extjs extjs4

【解决方案1】：

我对 ExtJS >= 5.0 比较熟悉，但我认为以下代码可以解决您的问题。

在您的控制器中：

init: function() {
    this.control({
        'viewGridMtoOrganismos': {
             beforerender: this.loadStore
         }   
    })
},

this.loadStore: function(view){
    Ext.getCmp('comboEstados').getStore().load();
}

在这种情况下，我使用的是 beforerender（在视图完全渲染时加载存储），但您可以使用 afterrender 或 render。

作为提示，您应该在编码时查看一些有关命名法（在小部件名称方面）和良好实践的 Sencha 信息。

【讨论】：