CODEWITHSUNDEEP
extjs
Victor
Victor

Reputation: 17107

extjs dynamically add a grid to a tab?

In my extjs tabpanel, I have a tab. In the tab I do a :

this.tab.add(this.someGrid1);

Now based on a certain condition, I want to do :

if (cond ==true)
this.tab.remove(this.someGrid1);
this.tab.add(this.someGrid2);

Is this possible? I tried without the remove and it does not work. Nothing happens, the old someGrid1 remains.

EDIT: By taking the suggestions, I changed code to :

if (cond ==true)
this.tab.remove(this.someGrid1);
this.tab.add(this.someGrid2);
this.tab.doLayout();

else if (cond ==false)
this.tab.remove(this.someGrid2);
this.tab.add(this.someGrid1);
this.tab.doLayout();

When page loads, cond == true and things work good. When I change cond to false through a combo, someGrid1 loads fine. When I change back to cond ==true, the code does not execute beyond

this.tab.add(this.someGrid2);
this.tab.doLayout();

and someGrid2 is not rendered. The error is this:

Error: b.getPositionEl().dom is undefined

Upvotes: 1

Views: 3857

Answers (3)

dan-klasson
dan-klasson

Reputation: 14230

The dom is destroyed on remove so you have to recreate the div. That is why you're getting the dom is undefined error message.

Upvotes: 0

Stefan Gehrig
Stefan Gehrig

Reputation: 83692

When adding and removing components dynamically at run time, you'll have to make sure that Ext triggers a re-rendering of the component to ensure that the changed state will be reflected. I actually don't know the exact structure of your panel but assuming that this.tab is the Ext.TabPanel you must do

this.tab.doLayout();

to re-render the component.

Upvotes: 1

Sean Adkinson
Sean Adkinson

Reputation: 8615

That code looks right to me. Have you tried debugging and verifying that this.someGrid1 is set properly when the remove method is called? It's easy to get your this scope messed up in Ext.

It shouldn't matter, but you might also try adding true as a second argument to remove. This will force Ext to destroy the component, and any dom associated with it will be gone.

Perhaps post some additional code if you still can't get this working, but I bet if you use Firebug and debug this function, the solution will be obvious.

Upvotes: 1

Related Questions