ExtJS - 动态生成复选框

时间:2016-11-30 16:47:59

标签: extjs

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

以下是我的复选框组类的摘要。

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一起使用。

由于

1 个答案:

答案 0 :(得分:3)

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