從extjs存儲創建複選框組

我想從數組中填充存儲區創建複選框組。這是我的商店。從extjs存儲創建複選框組

var checklistStore = new Ext.data.Store({ 
     data: arraySubT, 
     fields: ['id', 'boxLabel'] 
    });

和目前我的複選框組只在從數組顯示而不是存儲。

      xtype: 'checkboxgroup', 
          fieldLabel: 'Checklist', 
          columns: 1, 
          vertical: true, 
          listeners: { 
           change: function(field, newValue, oldValue, eOpts){ 

           } 
          }, 
          items: checkboxconfigs

但是，我想從store.Wow我可以做到這一點？

來源

2016-02-03 coolbuddy

您必須從商店獲得一個值（boxLabel可能只是一個標籤......）false：未選中，true：選中。你使用哪個版本的extjs？使用當前的工作應用程序進行小提琴。有人可以修改它以從商店獲取配置。 – Michel

[編輯]
爲了您和我的方便，我製作了一個可以使用的通用組件。它可能需要對它所反應的商店事件進行一些調整。在this fiddle中查找。
[/編輯]

你必須手工進行：

renderCheckboxes:function() { 
    checkboxgroup.removeAll(); 
    checkboxgroup.add(
     checklistStore.getRange().map(function(storeItem) { 
      return { 
       // map the storeItem to a valid checkbox config 
      } 
     }) 
    ); 
}

和重複一遍又一遍又一遍的存儲數據發生變化時。也就是說，你必須附加到店內活動：

checklistStore.on({ 
    load:renderCheckboxes, 
    update:renderCheckboxes, 
    datachanged:renderCheckboxes, 
    filterchange:renderCheckboxes, 
    ... 
})

也許你會忽視你必須附加到一些事件，但遲早你會覆蓋所有的邊緣情況。

來源

2016-02-03 16:27:28 Alexander

Thanks @ Alexander.Need知道如何使用checkboxgroup的配置：xtype：'checkboxgroup'，fieldLabel：'Checklist etc – coolbuddy

我的意思是如何顯示覆選框。不過，我對extjs.How和在哪裏調用renderCheckboxes函數。 – coolbuddy

你可以爲你製作一個小提琴嗎？ – coolbuddy

這裏是working fiddle給你。

只需通過Ext.data.Store.each()方法循環存儲數據並設置複選框組項目。

var _checboxGroupUpdated = function() { 
    // Use whatever selector you want 
    var myCheckboxGroup = Ext.ComponentQuery.query('panel checkboxgroup')[0]; 

    myCheckboxGroup.removeAll(); 
    myStore.each(function(record) { 
     myCheckboxGroup.add({ 
      boxLabel: record.get('fieldLabel'), 
      inputValue: record.get('value'), 
      name: 'myGroup' 
     }); 
    }); 
} 

// Add all listeners you need here 
myStore.on({ 
    load: _checboxGroupUpdated, 
    update: _checboxGroupUpdated, 
    datachanged: _checboxGroupUpdated 
    // etc 
});

來源

2016-02-03 16:42:07

謝謝@謝爾蓋。將這項工作動態地添加到商店後將這項工作。添加到商店後，它會自動顯示新的複選框。 – coolbuddy

用'.on（）'添加事件監聽器作爲@Alexander提到，如果你想要它dinamically –

@coolbuddy，我更新了我的小提琴，現在它的動態，檢查出來 –

從extjs存儲創建複選框組

回答

相關問題