[SOLVED] Form not being render correctly the second time

[blizzard182]

Hi! I am working with tab panels and I added a grid inside one and also a toolbar.

Inside that toolbar I´ve added a button to add a new tab that contains a form, to add a new account for example.

The problem is that the tab and the form inside, render fine the first time. The second time I clic the button, the tab is created, and the form inside only render 2 fields. I also get an error in firebug that says:

Operation is not supported"  code: "9
return !!(p.compareDocumentPosition(c) & 16);

My button handler code is this:

function handlerAddTabForm(typeForm, txtTab) {
    
    if (typeForm) {

        var idNum=Math.floor(Math.random()*10000001);
        
        if (typeForm == 'account') {            
            form = new Ext.backslash.forms.NewAccount({id: idNum});            
        } else if (typeForm == 'contact'){
            form = new Ext.backslash.forms.NewAccount({id: idNum});
        }

        var idNum2=Math.floor(Math.random()*10000001);
        
        Ext.getCmp('tabs').add( {
            id: idNum2,
            title : txtTab,
            iconCls : 'tabs',
            items : [ form ],
            closable : true
        }).show();

    }

}

The first value is the type of form that I am creating, and the second is the name of the form.

The random functions where added later since I found that it could be because the ID is the same or that the tab is not being destroyed when I close it, but it didnt change anything.

I´ve also tried to add a close listener to the tab like this:

listeners: {
                close: closeTabListener
            },

function closeTabListener(tabPanel, tab){
    alert("Removing panel");
    tabPanel.remove(tab);
}

But I have to check this because its not executing the alert. I am just copying the code to see if that helps.

Any clues?
Thanks!!

[Condor]

Closing a tab will destroy the form. Are you recreating the form when you add a new tab?

[blizzard182]

Closing a tab will destroy the form. Are you recreating the form when you add a new tab?

Thanks for answering Condor.

I thought this line was making that:

form = new Ext.backslash.forms.NewAccount({id: idNum});

I am calling it each time I want to add a new tab, which is called by the button in the toolbar. The form is declared in another JS file and I extended the regular form.

[Condor]

1. The error is not coming from the Ext code, so is it an error in your own code?
2. Do your forms use unique ids? That would cause a clash when creating multiple tabs with an instance of the same form.
3. I would auto-increase the id instead of generating it at random (you always get a small chance of a conflict with using random).

[blizzard182]

1. The error is not coming from the Ext code, so is it an error in your own code?
2. Do your forms use unique ids? That would cause a clash when creating multiple tabs with an instance of the same form.
3. I would auto-increase the id instead of generating it at random (you always get a small chance of a conflict with using random).

Thankf for answering again!

1) Could be. The error is showing in the base-debug.js file but of course it could be related to something wrong in my code. The first time it works great so It has to be related to duplicated 'something'. Thats why I create a new form each time and why I changed it to set random IDs.
2) Nope. I already check that my extended form (NewAccount) is not setting the ID property in the declaration. Maybe is something about the grid? The grid and the toolbar reside always there. (Thats also why I am setting an ID to the tab, in case thats a problem too).
3) Agreed. Using random at this time and for a test was easier than using auto-increase. I would have to save it somewhere and I seriously doubt that I would get the same ID twice!

I think I have to make things simpler and test with a simple form. Its weird that the first time the 20 fields show correctly, and the second time only 2 and then the "Operation not supported" error in firebug.

[blizzard182]

Ok, I think I found the problem although I dont know how to solve it in a good way. I found that it breaks after trying to load (insert) a combobox into the form. This is part of my Form definition:

Ext.backslash.forms.NewAccount = Ext.extend(Ext.FormPanel, {

    txtUrl: '../ServletNew?action=newaccount&lang='+lang,

    initComponent : function(config) {

        Ext.apply(this, {            

            title   : txtNewAccount,
            monitorValid:true,
            autoHeight: true,
            autoWidth   : true,
            url: this.txtUrl,
            defaults: {
                anchor: '0'
            },
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.33,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: txtName,
                        name: 'name',
                        anchor:'95%',
                        allowBlank:false
                    }, comboAccountCategory
                    ,comboIndustry
                    ,comboSource
                    ,comboTeam
                    ,comboAssignedTo
                    ]
                },{

The thing is that I have another JavaScript file which create the ComboBoxes and the stores and I just assumed it was OK to reuse them.

Well, what I am thinking is that when I close the tab, the form is destroyed, along with the combos.

Does it sound like a possible problem? I dont want to create new combos each time I create a form.

[blizzard182]

So the combos were the problem for me. I am posting what I had to change so anyone could know the problem and how to reuse the combos. I'd like to thank you Condor. I found a clue in one post you made in another thread. Unfortunately I cant say the same for all the users in this forum. Some clearly treat everyone which much arrogance.

So, the problem was that I was creating a new Form for the new tabs, but I was using the same combos, which I suppose were being destroyed when I closed the tab. So, this is what I did:

1) Extended the combos (Using the same store):

storeCbAccountCategory = new Ext.data.JsonStore( {
    fields : [ 'id', 'name' ],
    root : 'data',
    url : locServlets+'ServletComboBox?combo=accountcategory',
    id : 'id'
});

Ext.backslash.combos.AccountCategory = Ext.extend(Ext.form.ComboBox, {

    initComponent : function(config) {

        Ext.apply(this, {

            name : 'fk_account_category_id',
            hiddenName : 'fk_account_category_id',
            valueField : 'id',
            store : storeCbAccountCategory,
            displayField : 'name',
            forceSelection : true,
            typeAhead : true,
            triggerAction : 'all',
            emptyText : 'Select a category...',
            selectOnFocus : true,
            fieldLabel : 'Category',
            allowBlank : false
            
        });

        Ext.backslash.combos.AccountCategory.superclass.initComponent.apply(this,
                arguments);
    }
});

Then modified the form definition like this:

items: [{
                        xtype:'textfield',
                        fieldLabel: txtName,
                        name: 'name',
                        anchor:'95%',
                        allowBlank:false
                    }, new Ext.backslash.combos.AccountCategory  (Correct) 
                    , comboAccountCategory (Incorrect)