View Full Version : Multiple component instances and setting values not working as expected

8 Apr 2013, 2:17 PM
I'm running into a weird issue. The way my app works is that there's a main content area in the viewport where views get loaded when controller functions get called. So to load a view in that area, this function is used:

setView: function(view) {
// Create the view object
view = Ext.create(view);

// Add view to the parent panel
var pnl = Ext.ComponentQuery.query('#contentPanel')[0];

So basically, it take a string as the path to a view, creates the view object, removes all elements from the main content panel and adds the new view as the only child.

I'm running into a case where I have a custom container (call it a ContextPicker) that has a number of components in it, namely two combo boxes and a radio button group with three radio button fields in it. This ContextPicker gets used in multiple views of my application. If I have a view currently displaying that has the ContextPicker and I load another one that also has it in, some of my code doesn't behave as I would expect. My ContextPicker has an applyState() function that runs the following based on the state to set the radio button:


Whenever I change views, the state fails to apply properly, basically my radio button selection gets removed completely in the new ContextPicker instance loaded (I say removed because there is a default that gets selected in case the applyState() function isn't triggered). I think this has something to do with having two instances of the same component loaded at once. I say this because if I change my setView() function to run pnl.removeAll() before creating the view object, things work fine. This seems like a solution, but my code above is simplified and ideally I'd like to not have to change that part. I also tried adding a static variable to my ContextPicker that increments by 1 every time I create a new one so that my itemIds are unique, and that doesn't work either. I must be misunderstanding something, any ideas?

8 Apr 2013, 5:57 PM
OK, so after hours of debugging, I think I've figured it out. Looks like the problem is that when two instances of my ContextPicker get created, two set of RadioGroup objects get created with three radio buttons that have the same "name" config option. This screws up the behavior of selecting a radio button, since it actually iterates through radio buttons of all instances to deselect the ones that you didn't click on instead of just the ones that are under the instance's radio buttons that were clicked. To fix, I simply added a static property to my ContextPicker container and I increment it every time a new instance gets created. I then append it to the "name" config option of the radio buttons. That seems to have fixed the problem.