ExtJs 6.2中如何基于Store构建checkboxgroup答案

【问题标题】：How to build checkboxgroup based on Store in ExtJs 6.2ExtJs 6.2中如何基于Store构建checkboxgroup
【发布时间】：2016-10-01 18:07:50
【问题描述】：

可以在表单中自动运行 ViewController 中的方法吗？我需要创建应基于来自该控制器的数据的复选框组。在 ViewController 的这个方法中，我从 JSON 文件中获取数据，在这里我正在更新一个视图。当我在视图中的侦听器中有一个按钮时一切正常，但它应该自动运行，并且复选框应该基于此存储数据构建

onClickLoadData: function(){
        console.log('onClickLoadData runned');
        var gridStore =  this.getStore('perosnellstore');
        var columnsArray = this.getStore('perosnellstore').getProxy().getReader().rawData.cols.columns;

        console.log(columnsArray.length);

        for( var i = 0; i < columnsArray.length; i++){
            var checkbox = Ext.create('Ext.form.field.Checkbox', {
                boxLabel: columnsArray[i].text,
                x: 0,
                y: i * 30
            });
            Ext.ComponentQuery.query("#checkBoxGroupModules")[0].add(checkbox);
        }
    }

和 ViewModel 类：

Ext.define('Message.web.view.edit.EditViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.edit',

    data:{
      title: ''
    },
   stores : {
       perosnellstore: {
           fields : ['name'],
           autoLoad: true,
           proxy: {
               type: 'ajax',
               url : 'resources/response.json',
               reader: {
                   type: 'json',
                   rootProperty: 'cols.columns',
                   keepRawData: true
               }
           }
       }
   }


});

【问题讨论】：

自动运行是什么意思？它应该在什么时候运行？多少次？
一次，加载视图后。我在配置商店时遇到问题，所以我这样做了，但我不确定这是否正确。我尝试使用 initComponent 方法，但该方法是在应用程序启动后调用的。

标签： javascript extjs extjs6

【解决方案1】：

答案是商店内的听众。

var myStore = Ext.create('Ext.data.Store', {
  ...
  listeners: {
    'load': {
      fn: function(store, records, success, operations) {
        Ext.each(records, function(rec) {
          console.log(Ext.encode(rec.raw));
        });
      }
    }
  }
  ...
});

【讨论】：

【解决方案2】：

在 viewController 中你可以监听一个 store。文档：http://docs.sencha.com/extjs/6.2.0/classic/Ext.app.ViewController.html#cfg-listen

加载远程数据时，商店会触发一个事件。文档：http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html#event-load

监听store的load事件，调用onClickLoadData。

代码：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    listen: {
        store: {
            '#storeId': {
                load: 'onClickLoadData'
            }
        }
    }
});

【讨论】：

不行 :( 这个方法不是这样调用的，不知道为什么