ExtJS - 動的にチェックボックスを生成する

Question

私はチェックボックスのグループが動的なチェックボックスを持っています。バックエンドは、ラベルと入力値を含むデータを返します。私はこれらのレコードをループし、それぞれのチェックボックスオブジェクトを生成します。しかし、生成された配列を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で作業doesntの場合は、バックエンドの応答を生成。

おかげ

Answer 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