ExtJS——动态生成复选框答案

【问题标题】：ExtJS -- dynamically generate checkboxesExtJS——动态生成复选框
【发布时间】：2016-12-01 00:57:25
【问题描述】：

我有一个复选框组，其中包含动态数量的复选框。后端返回包含标签和输入值的数据。我循环这些记录并为每个记录生成一个复选框对象。但是当我将生成的数组传递给 items 数组时，什么也没有发生。

这是我的复选框组类的 sn-ps。

Ext.define("MyApp.view.form.field.CheckboxGroup",{
  extend:"Ext.form.CheckBoxGroup",
  ...
  ...
  initComponent:function(){

     this.items = getCheckboxes();

     ...

     this.callParent(arguments);
  },

  getCheckboxes:function(){
     Ext.Ajax.request({
        url:"blah/getcheckboxes",
        scope:this,
        success:function(resp_){
          var resp = Ext.JSON.decode(resp_.responseText);
          var checkboxesArr = [];
          if(resp.data){
            for(var i=0; i<resp.data.length; i++){
              checkboxesArr.push({boxLabel:resp.data[i].label, inputValue:resp.data[i].id, ....});
           }
         }
         return checkboxesArr;
     });

/*return checkboxesArr = [
       {boxLabel: 'Yes', name: this.name, inputValue: 'Y'},
       {boxLabel: 'No', name: this.name, inputValue: 'N'}         
    ];*/
}

如果我用 2 个复选框取消注释静态 checkboxesArr 并返回它，它会起作用，但它不适用于后端响应生成的 checkboxesArr。

谢谢

【问题讨论】：

标签： extjs

【解决方案1】：

ajax 调用是异步的，因此您可以 add 代替项目：

getCheckboxes: function () {
    Ext.Ajax.request({
        url: "data1.json",
        scope: this,
        success: function (resp_) {
            var resp = Ext.JSON.decode(resp_.responseText);

            var checkboxesArr = [];

            if (resp.data) {
                for (var i = 0; i < resp.data.length; i++) {
                    checkboxesArr.push({
                        boxLabel: resp.data[i].label,
                        inputValue: resp.data[i].id
                    });
                }
            }
            this.add(checkboxesArr);
        }
    });
}

工作示例：https://fiddle.sencha.com/#view/editor&fiddle/1lgc

【讨论】：