Error adding and removing content to tabPanels - ExtJs

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开发者_StackOverflow社区) {
        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..

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!