PDA

View Full Version : Dynamically load items for radiogroup



floraoma2000-extjs
27 Nov 2012, 12:57 AM
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
27 Nov 2012, 1:14 AM
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 (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-event-load)

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

floraoma2000-extjs
27 Nov 2012, 2:46 AM
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
27 Nov 2012, 9:47 AM
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
27 Nov 2012, 11:54 PM
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
28 Nov 2012, 1:35 AM
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
28 Nov 2012, 1:41 AM
Mark the post as "best answer" please ^^