ExtJs panel - adding dynamic components

Question

I have a window with a panel inside the window. I am dynamically adding components to the panel. These components are located in the "hbox" layout, so that they are arranged horizontally. When I click the button, I will add another line of similar components to the “hbox” layout in the panel. The problem here is that I want to add a second line below the first line, but the following code adds 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 a second line of components below the first line.

Extjs Version 3.4

Answer 1

I found the cause of the problem.

Reason . When we add components with the same " id " to the panel, the added component will be added to the top of the panel.

To fix . Use itemId 'instead of id "when adding the same component to the panel.

Hope this will be helpful to someone.

Answer 2

Instead, you can use the insert method to specify the index of the panel elements on which you want to place your component:

 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 .