Error adding and removing content to tabPanels - ExtJs

Question

I have a web app built using ExtJS framework.

I have a tree in my west panel, and in the center panel a TabPanel. When I click on any of the nodes on the tree in the west panel it attempts to add a form on to the center TabPanel, the following code is called:

var center = Ext.getCmp("center-panel");

var existingpanel = center.get(panelId);
if (existingpanel) {
    center.setActiveTab(existingpanel);
} else {

    var activeTab = center.getActiveTab();

    if (!openNew && activeTab) {
        var removed = center.remove(activeTab, true);
    }

        center.add(c);
        center.setActiveTab(panelId);
        center.doLayout();

}

This retrieves the current component, and then checks to see if the tab we are attempting to load exists, if it does exist then it just activates that tab, otherwise it will attempt to add a new one. The OpenNew s just a flag that is passed in to state whether it should be opened in a new tab (for example if the user ctrl+clicks the node on tree).

Without using the OpenNew functionality (e.g. with just one tab) the form works correctly, and I can navigate between nodes with the tabs being removed/re-added correctly.

However, if I ctrl+click a node to open a second tab, the tab opens at first, so there are two tabs, but then when I select another node (so this should just remove the recently added second tab and replace it with a new tab for the new node) it just closes the second tab but fails to add the new tab.

I can't see any reason behind it as it is fien adding/removing the tabs when there is just the single tab.

There is an error in FireBug, but it doesn't offer much help:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOM3Node.compareDocumentPosition]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: /ext/ext-3.1.1/adapter/ext/ext-base-debug.js?d=1066331810 :: <TOP_LEVEL> :: line 1900"  data: no]

-----------UPDATE:--------------

it seems to correlate to doLayout() call - if I put a doLayout() call directly after the remove() call, then it doesnt get as fat as the add() call, and if I put it after the .add() call then it half loads the new tab but stops before completing.

If I have a doLayout() call after both, then it works a little better, and I can then have two functioning tabs, but when I tried to add the third tab it displays the same behaviour as above, and closes the third tab and doesnt repopen a new one..

Can't think of anything right now.. What happens if you ctrl-click repeatedly (to open multiple tabs) ? What version of ext are you using, and posting a jsfiddle example might help. Did you confirm that the code gets to the center.add(c) bit ? — Jad
continuing to ctrl+click successfully adds more tabs - its only seems to start going wrong once call the remove() function with multiple tabs open (if open multiple tabs then close one using the close button on the tab header I also get similar problems. — rhinds
Did you check for id conflicts ? (multiple Ext components declaring the same id property) — Jad
Then a jsFiddle example would be nice. Maybe you could try to setup nodes that add an extremely simple tab to check if the destroy/add goes wrong because of a complex component. — Jad

rhinds rhinds · Accepted Answer · 2011-05-20T09:52:57

I have now resolved this issue - the problem was to do with the formPanels I was actually adding, whilst all the panels themselves had unique IDs I had not thought to check the IDs of other components within the form (as Jad suggests in his comments), and the forms had "FieldSets" defined with static IDs, removing those resolved the problems.

I also tested the problem in Chrome using the developer tools and found the stack trace provided a lot more useful than the error provided by FireBug, so I will be using both from now on!

Error adding and removing content to tabPanels - ExtJs

1 Answers