Needing an ExtJS bug workaround

Question

I have a web application that uses Ext-JS 2.2. In a certain component, we have an empty toolbar that we are trying to add a button to using

myPanel.getTopToolbar().insertButton(0, [...array of buttons...]);

However, in IE6/7 this fails because of lines 20241-20242 in ext-all-debug.js:

var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[index]);

Since "this.tr.childNodes([0])" does not yet exist in IE, this fails with "Invalid argument".

THE REAL QUESTION: Can I, using CSS similar to the below add a child to every toolbar <tr> so that this.tr.childNodes[0] is found:

div.x-toolbar tr:after { content: " "; }

I totally realize this is a hack, but for legal reasons I cannot change any Javascript, not even to add an empty button ({}) to each toolbar. Major kudos to anyone that can figure this out.

Answer 1

If all you are doing is adding to a empty panel

 myPanel.getTopToolbar().add(buttons etc);

Or

 myPanel.getTopToolbar().addButton(..);

Either should work. It looks like purpose of insertButton is for putting a button within a non-empty toolbar.

Answer 2

I didn't think there was a CSS-only solution.

For the record, I ended up injecting javascript into the page that overrides the Ext.Toolbar prototype for the insertButton() function to check for the existance of "this.tr.childNodes([0])" and default to addButton() if it didn't exist.

Answer 3

Did you look into adding the button after the panel has been rendered? Maybe something like:

myPanel.on('render', function() {
   this.getTopToolbar().insertButton(0, [...array of buttons...]);
}, true);

Answer 4

What I've had to do in the past was include an empty toolbar in my element config:

tbar:[]

Then (and only after the element has completely rendered) use the .add() method for injecting buttons.

Order of events will get you every time. It takes a while to get a handle on it.