Ext 3.4 - How the populate a combo box using a local array on the fly

Question

I have a radio buttons in a window in Ext 3.4. Based on which radio button is clicked I have to populate the data accordingly in a combo box.

for e.g: Radio Buttons: 1. Window 2. Linux. If the user checks Window, then all windows images will be populated in the combo box. Now for fetching all the window images I am not making any call to the server to fetch those images but have it is a client side stored in an local array. Below is the code snippet:

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,


},

But this is not working. I am getting an error store.reload() is not defined. How do i make it work?

Answer 1

Since multiple selections are possible, I think checkboxgroup is more suitable than radiogroup in your case. Sample Code.

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'
    }]
});