PDA

View Full Version : Add item to RadioGroup with ExtJS 4.1



janpetzold
22 Jan 2014, 7:35 AM
Hi there,

I defined a view with a radiogroup...


{
xtype: 'radiogroup',
itemId: 'foo',
autoRender: true,
items: [
{ boxLabel: 'Item 1', name: 'test123', inputValue: 'foo' },
{ boxLabel: 'Item 2', name: 'test123', inputValue: 'bar' }
],
allowBlank: false
}


And I want to add a new item at runtime in my controller:



var myItem = new Ext.form.Radio({
boxLabel: 'Item 3',
name: 'test123',
inputValue: 'boom'
});
combo.add(myItem);


It doesn't work. I see that the item has been added via Chrome DevTools, but the radiobutton is just not displayed. I tried to force render/doComponentlayout/doLayout, but no effect. So for me it seem that it is not possible to add items to a radiogroup at runtime. I'm using ExtJS 4.1.3.

Right now I have a proper MVC architecture and don't want to break that :)

Thanks!

scottmartin
22 Jan 2014, 12:07 PM
Trying to figure out what you are trying to do with this:


combo.add(myItem);

janpetzold
22 Jan 2014, 12:14 PM
Thanks for the reply. I set a ref to the itemId of the RadioGroup inside my controller. Basically combo is just this inside a listener method (triggered in a "change"-event, but could be anything):



var combo = this.getMyRadioGroup();


The ref would be "myRadiogroup" here. This works, when I can debug it the RadioGroup-component is selected and I can perform all kinds of actions with it - just no kind of data/content manipulation that I look for.

scottmartin
22 Jan 2014, 2:15 PM
See if the following will help:



Ext.application({
name : 'Fiddle',

launch : function() {

var form = Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 600,
height: 150,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
fieldLabel: 'Radio Group',
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
]
}]
});

var rg = form.down('radiogroup');

var myItem = new Ext.form.Radio({
boxLabel : 'Item 7',
name : 'rb',
inputValue : '7'
});

rg.items.add(myItem);
rg.doLayout();

}
});

janpetzold
23 Jan 2014, 3:16 AM
Thanks for the reply. That worked on an isolated basis, but unfortunately not in my environment :(

Essentially I create my view (extended from Ext.panel.Panel) and attach all my items during the initComponent() method. That works fine for the layout. However when I add your code I see that once I click the button the handler gets triggered, the new item gets added to the radiogroup (means that the amount of items in the radiogroup-model is increased according to Chrome DevTools), but it is just not displayed. There are also absolutely no changes in the DOM. I'm clueless here.

f.baron
23 Jan 2014, 3:47 AM
var myItem = new Ext.form.Radio({
boxLabel: 'Item 3',
name: 'test123',
inputValue: 'boom'
});
combo.add(myItem);




Have you tried with 'combo.items.add(myItem);' ?

janpetzold
23 Jan 2014, 4:56 AM
Yes, did that - no effect. As I've written the model of the radiogroup seems to be updated properly, but nothing is rendered.

scottmartin
23 Jan 2014, 7:08 AM
The code I provided works in our online fiddle:
https://fiddle.sencha.com/#home

Please create a working test case so we can have a better look.

janpetzold
23 Jan 2014, 9:15 AM
I e"solvged" this by using a combobox instead of a radiogroup, that worked right away.