Ext 3.4 - Как заполнять поле со списком с помощью локального массива на лету

Question

У меня есть переключатели в окне Ext 3.4. На основании того, какой переключатель нажат, я должен заполнить данные соответствующим образом в поле со списком.

, например: Радиоуправления: 1. Окно 2. Линукс. Если пользователь проверяет Окно, то все окна будут заполнены в поле со списком. Теперь для получения всех оконных изображений я не звоню на сервер для получения этих изображений, но это клиентская часть, хранящаяся в локальном массиве. Ниже приведен фрагмент кода:

var ImagesArray = new Array(); 
ImagesArray=[];// On load the array contains no data 
{ 
    xtype: 'radiogroup', 
      fieldLabel: 'Image type', 
      cls: 'x-check-group-alt', 
      itemid: 'ImageType', 
      items: [ 
       {boxLabel: 'WindowsImages', name: 'rb-auto', inputValue: 'Windows', id: 'Windows',checked:true, 
      listeners: { 
    'check' : function(radio, checked) { 

    data =['Windows 2008 Server','Windows 2012 server']; 
    ImagesArray.loadData(data,false); 
    ImagesArray.store.reload(); 
} 
}, 
// My combo box 

{ 
xtype : 'combo', // 6 
fieldLabel : 'Template/Image name', 
id: 'VMTemplate', 
name: 'VMTemplate', 
labelWidth: 250, 
triggerAction: 'all', 
forceSelection: true, 
editable:false, 
store : ImagesArray, 


}, 

Но это не работает. Я получаю ошибку store.reload() не определен. Как заставить его работать?

Answer 1

Поскольку возможны множественные выборы, я думаю, что checkboxgroup более подходит, чем радиогруппа в вашем случае. Образец кода.

Ext.create('Ext.form.Panel', {  
    width: 300, 
    height: 500, 
    bodyPadding: 10, 
    renderTo: Ext.getBody(), 
    items:[{ 
     xtype: 'checkboxgroup', 
     fieldLabel: 'Two Columns',  
     columns: 2, 
     vertical: true,  
     listeners:{ 
      change: function(){ 
       var data = Ext.Array.flatten(Ext.Object.getValues(this.getValue())); 
       data = data.map(function(n){ return { name: n } }); 
       Ext.getCmp("VMTemplate").getStore().loadData(data); 
      } 
     } ,  
     items: [ 
      { boxLabel: 'Item 1', name: 'rb-auto', inputValue: 'Item 1'}, 
      { boxLabel: 'Item 2', name: 'rb-auto', inputValue: 'Item 2'}, 
      { boxLabel: 'Item 3', name: 'rb-auto', inputValue: 'Item 3' }, 
      { boxLabel: 'Item 4', name: 'rb-auto', inputValue: 'Item 4' }, 
      { boxLabel: 'Item 5', name: 'rb-auto', inputValue: 'Item 5' }, 
      { boxLabel: 'Item 6', name: 'rb-auto', inputValue: 'Item 6' } 
     ] 
    },{ 
     xtype: 'combo', 
     store:{ 
      fields: ['name'], 
      data: [] 
     }, 
     displayField: 'name', 
     valueField: 'name', 
     emptyText: 'Template', 
     id: 'VMTemplate', 
     queryMode: 'local' 
    }] 
});