How to add an ExtJs component at a specific position (index)?

Question

I have a ToolBar with some components (TextFields and Buttons) and I would like to dynamically add a component (TextField, for example) before the other components.

I tried tbBar.add(myComponent); without success.

Any idea?

Cilicia

Answer 1

You can use Ext.container.AbstractContainer.insert:

tbBar.insert(0, myComponent);

Primaveria

@Roberto: To indicate that an answer has been correct and has solved the problem stated in the question, you should mark the answer as "accepted". – Primaveria

It is also true for add panel to another panel at position specific. – Maudiemaudlin

I tried the same way but got this as error "Cannot read property 'substring' of undefined" in ext-all-debug.js – Holbrooke

@strikers Looks more like a problem with the component that you add to the toolbar. This error message occurs if you use wrong xtypes. – Primaveria

@StefanGehrig: can you please tell me what exactly you mean by wrong xtypes?, do you mean a xtype that doesn't exist, then my xtype was correct. can there be other reason for this error? my code looks like this this.tabView.insert(1,{ xtype: 'SimpleProjectDropdown', target: this, itemID: 'simpleDropdown' }); – Holbrooke

@strikers: Most likely SimpleProjectDropdown does not exist or is incorrect. Please show the definition of SimpleProjectDropdown. There should be something like alias: 'widget.' in there. – Primaveria

@strikers: You're sure that the alias for your component matches widget.SimpleProjectDropdown? And aliases should be written in lower-case but I'm not sure if this is enforced when instantiating a component. – Primaveria

stefan I got the issue, i forgot to add the view in requires section :p – Holbrooke

Answer 2

As an additional information, you can use "Ext.container.AbstractContainer.container.items.indexOf" to get an index of a specific item in your container.

var index = container.items.indexOf(component);
container.insert(index, newComponent);

Tumor