ExtJs panel - adding dynamic components

Question

I have a window with panel in inside the window. I add components to the panel dynamically. These components are in 'hbox' layout so that they are arranged horizontally. On click of a button i will add one more row of similar components in 'hbox' layout to the panel. Here the problem is that i want to add the second row below the first row, but the following code adds the components to the top of the panel.

panel.add(items);  #items is the group of comboboxes in hbox layout
panel.doLayout();

Any ideas to solve this problem? so that i can add second row of components below the first row.

Extjs Version is 3.4

Solution 1

I found the cause of the problem.

Cause: when we add components with same 'id' to a panel, then the newly added component will get added to the top of the panel.

Fix: Use 'itemId' instead of 'id' while adding same component to the panel.

Hope this will be useful for someone.

Solution 2

You can use insert method instead to specify the index of panel items that you want to put your component at:

var index = panel.items.length;
panel.insert(index, items);

// or if it always going to be the second item
panel.insert(1, items);

Here it is in the docs.

Comments

[AJJ]

For my question, your answer is correct. But still i could not achieve it in my framework. Need to check with my framework. Thanks a lot.