Results 1 to 7 of 7

Thread: [SOLVED] Form not being render correctly the second time

  1. #1

    Cool [SOLVED] Form not being render correctly the second time

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

    Inside that toolbar Ive 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:

    Code:
    Operation is not supported"  code: "9
    return !!(p.compareDocumentPosition(c) & 16);
    My button handler code is this:

    Code:
    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.

    Ive also tried to add a close listener to the tab like this:

    Code:
    listeners: {
                    close: closeTabListener
                },
    Code:
    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!!
    Last edited by blizzard182; 18 Sep 2010 at 9:11 PM. Reason: I solved it (?)

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

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

  3. #3

    Default

    Quote Originally Posted by Condor View Post
    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:

    Code:
    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.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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).

  5. #5

    Default

    Quote Originally Posted by Condor View Post
    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.

  6. #6

    Question

    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:

    Code:
    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.

  7. #7

    Default

    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):
    Code:
    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:

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

Similar Threads

  1. Upload window does not render correctly on second time
    By TheBigOnion in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 5 Oct 2010, 3:46 AM
  2. Form with city, state, zip on same line doesn't render correctly
    By thephatp in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 31 Aug 2008, 12:09 AM
  3. Form/Form Elements Render differntly each time i load a page
    By ruggerboy in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 27 Jun 2008, 2:37 AM
  4. Replies: 0
    Last Post: 7 Apr 2008, 6:04 AM
  5. Time Field not loading correctly with value
    By dlbjr in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 15 Mar 2008, 2:16 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •