Dynamically load items for radiogroup

[floraoma2000-extjs]

Hi all,
I need help for my problem (ExtJs 4) . I want to load some items (data from my database) for my radiogroup dynamically.

First of all I tried to solve the problem - step by step - by loading the items into an array like this.

var radiogroup = [
   { boxLabel: 'Item 11', name: 'rb', inputValue: '1' },
   { boxLabel: 'Item 21', name: 'rb', inputValue: '2' },
   { boxLabel: 'Item 31', name: 'rb', inputValue: '3' }
];

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'radiogroup',
        fieldLabel: 'RadioGroup',
        items: radiogroup
    }]
});    

This code works fine !

The next step like this works fine too.
I load the items via a store.

Ext.onReady(function () {
var store_fest = Ext.create('Ext.data.Store', {
    fields: ["boxLabel", "name", "inputValue"],   
    data:{'groupitems':[
        { boxLabel: 'Item 1x', name: 'rb', inputValue: '1' },
        { boxLabel: 'Item 2x', name: 'rb', inputValue: '2' },
        { boxLabel: 'Item 3x', name: 'rb', inputValue: '3' }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'groupitems'
        }
    }    
});

var radioArray = [];
for (var i = 0; i < store_fest.data.length; i++) {  
    radioArray.push(store_fest.data.items[i].data); 
}

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'radiogroup',
        fieldLabel: 'RadioGroup',
        items: radioArray
    }]
});    
});

The response data-format of a database select is JSON. So now I want to load the items reading a json store .This doesn't work. Here my code

Ext.onReady(function () {
var store_json = Ext.create('Ext.data.JsonStore', {
    storeId: 'radio',
    fields: ['boxLabel', 'name', 'inputValue'],  
    proxy: {
        type: 'ajax',
        url: 'items.json',   
        reader: {type: 'json', root: 'groupitems',totalProperty: 'total'},
        baseParams: { 
            operation:'showall' 
        },
    },
});

var itemsInGroup = store_json.load({
    callback: function(records, operation, success) {
        itemsInGroup = [];
            console.log(store_json.data.length);
            for (var i = 0; i < store_json.data.length; i++) {  
                itemsInGroup.push(store_json.data.items[i].data); 
            }
            console.log(itemsInGroup);
    }
});
var itemsInGroup = [];

Ext.create('Ext.form.Panel', {    
    title: 'RadioGroup Example',
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'radiogroup',
        fieldLabel: 'Radio',
        items: itemsInGroup 
    }]
});    
});

This log to the console (console.log(itemsInGroup) shows the right array.
Here is my items.json

{
    "groupitems": [ 
   { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
   { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
   { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }
    ]
}

There are no data shown in my Panel.

Please help me. Thanks a lot in advance.

[Arg0n]

I would say it's because ExtJs runs asynchron. That means the store takes too long, to load the data. So the radiogroup is already rendered, but the store isn't finished yet and kabooom. You see nothing ^^

What you need to do is waiting for the store and than build your radiogroup. You could do this with listening on an event of the store. See: load

If succes => build your radiogroup ELSE throw an exception or whatever ^^

[floraoma2000-extjs]

Within my firebug I made a stop and I saw that the panel is shown right. But the panel disappers unfortunalty again.
Only the empty panel with the title is shown.
Can sb help me?

[floraoma2000-extjs]

Hi thanks for your answer.
I've read the documentation of 'load'. But I couldn't get a solution for my problem.

If I set a breakpoint to the row

title: 'RadioGroup Example',

then the right radiogroup within the panel is shown on the screen shortly. Then the panel disappears again.
What should I do?

Thanks in advance

[Arg0n]

Ext.onReady(function () {


  var store_json = Ext.create('Ext.data.JsonStore', { 
    storeId: 'radio', 
    fields: ['boxLabel', 'name', 'inputValue'], 
    proxy: { 
      type: 'ajax', 
      url: 'items.json', 
      reader: {
        type: 'json', 
        root: 'groupitems',
        totalProperty: 'total'
      }, 
      baseParams: { 
        operation:'showall' 
      }, 
    },
  });


  var itemsInGroup = store_json.load({ 
    callback: function(records, operation, success) 
    {        
        itemsInGroup = []; 
        console.log(store_json.data.length); 


        for (var i = 0; i < store_json.data.length; i++) { 
          itemsInGroup.push(store_json.data.items[i].data); 
        } 


        console.log(itemsInGroup); 
    }
  });
  var itemsInGroup = [];


  Ext.create('Ext.form.Panel', { 
    title: 'RadioGroup Example', 
    renderTo: Ext.getBody(), 
    items:[{ 
      xtype: 'radiogroup', 
      fieldLabel: 'Radio', 
      items: itemsInGroup 
    }]
  }); 
});

Why do you set the var empty again? xD

Try this:

Ext.onReady(function () {


  var store_json = Ext.create('Ext.data.JsonStore', { 
    storeId: 'radio', 
    fields: ['boxLabel', 'name', 'inputValue'], 
    proxy: { 
      type: 'ajax', 
      url: 'items.json', 
      reader: {
        type: 'json', 
        root: 'groupitems',
        totalProperty: 'total'
      }, 
      baseParams: { 
        operation:'showall' 
      }, 
    },
  });


  store_json.load({ 
    callback: function(records, operation, success) 
    {        
        itemsInGroup = []; 


        console.log(records); 


        for (var i = 0; i < records.length; i++) { 
          itemsInGroup.push(records[i].data); 
        } 
        
        console.log(itemsInGroup);


        Ext.create('Ext.form.Panel', { 
          title: 'RadioGroup Example', 
          renderTo: Ext.getBody(), 
          items:[{ 
            xtype: 'radiogroup', 
            fieldLabel: 'Radio', 
            items: itemsInGroup 
          }]
        }); 
    }
  });
});

I'm not sure if it was records[i].data or maybe records[i].data.data or smth just try xD

[floraoma2000-extjs]

Thank you very much
The problem is solved. You have got the solution. I think I still have to learn a lot.

Thanks for helping

[Arg0n]

Mark the post as "best answer" please ^^