Clever Geek Handbook

Need to bypass ExtJS bypass

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

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

However, in IE6 / 7 this fails due to 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".

REAL QUESTION: Can I, using CSS like below, add a child to each <tr> toolbar so that this.tr.childNodes [0] is located:

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

I totally understand this is a hack, but for legal reasons I cannot change the Javascript, not even add an empty button ({}) to each toolbar. The main thing for everyone who can understand this.

0


source to share


4 answers


I didn't think there was just a CSS solution.



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

0


source


What I needed to do in the past was to include an empty toolbar in my item config:

TBAR: []



Then (and only after the element is fully rendered) use the .add () method to inject buttons.

The order of events will be for you every time. It takes some time to get the handle.

+2


source


If all you do adds to the blank panel

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

Or

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

Or they should work. It looks like the purpose of insertButton is to place a button on a non-empty toolbar.

+1


source


Have you looked at adding a button after rendering the panel? Maybe something like:

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


source






More articles:


All Articles