10

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?

Darin Kolev
  • 3,401
  • 13
  • 31
  • 46
Roberto Schuster
  • 293
  • 2
  • 5
  • 16

2 Answers2

27

You can use Ext.container.AbstractContainer.insert:

tbBar.insert(0, myComponent);
dan-klasson
  • 13,734
  • 14
  • 63
  • 101
Stefan Gehrig
  • 82,642
  • 24
  • 155
  • 189
  • @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". – Stefan Gehrig Jul 11 '11 at 13:20
  • It is also true for add panel to another panel at position specific. – Pritom Feb 29 '12 at 03:08
  • I tried the same way but got this as error "Cannot read property 'substring' of undefined" in ext-all-debug.js – Strikers Aug 22 '14 at 11:10
  • @strikers Looks more like a problem with the component that you add to the toolbar. This error message occurs if you use wrong xtypes. – Stefan Gehrig Aug 22 '14 at 18:06
  • @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' }); – Strikers Aug 24 '14 at 15:55
  • @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. – Stefan Gehrig Aug 24 '14 at 16:09
  • @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. – Stefan Gehrig Aug 25 '14 at 08:52
  • stefan I got the issue, i forgot to add the view in requires section :p – Strikers Aug 26 '14 at 05:44
3

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);
Kohei Mikami
  • 2,850
  • 24
  • 21