Results 1 to 6 of 6

Thread: destroy dialog and form

  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    73

    Default destroy dialog and form

    When is it best to initialise the code responsible for removing/destroying your form?

    This might sound confusing, but let me try and elaborate:

    For example, if you have a dialog that holds a form, you have several ways you can close/hide the dialog (and the form within it ofcourse). For example using the close button, using the cross-close button on top of the panel header, when you submit and call form.hide()..etc..

    So my question is, where (at what stage) is it best to destroy? Is it worth running the destroy code on an instance before creating it (since it might already be created) OR destroy when you hit close? but then what about when you submit the form?

    How do you guys go about this?

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    73

    Default

    Ok, I have a dialog, and with it I have a form.

    html
    PHP Code:
        <div id="a-addInstance-dlg" style="visibility:hidden;">
            <
    div class="x-dlg-hd">Add New Newsletter</div>
            <
    div class="x-dlg-bd">
                <
    div id="a-addInstance-inner" class="x-layout-inactive-content">
                    <
    div id="a-addInstance-form"></div>
                </
    div>
            </
    div>
        </
    div
    I am using the following to destroy the form (by Animal)
    PHP Code:
    Ext.override(Ext.form.BasicForm, {
    // Destroys this form, and all its Fields.
        
    destroy: function() {
            
    this.destroyed true;
            if (
    this.txId) {
                
    Ext.Ajax.abort(this.txId);
                
    delete this.txId;
            }
            
    this.items.each(function(f){
               
    f.destroy();
            });
            
    this.purgeListeners();
            
    this.el.removeAllListeners();
            
    this.el.remove();
            
    Ext.ComponentMgr.unregister(this);
    //        Ext.form.BasicForm.superclass.prototype.destroy.apply(this, arguments);
        
    }
    }); 
    I added the destroy like so:
    PHP Code:
    ...
    thisDialog.addButton('Cancel', function()
    {
        
    thisDialog.hide();
        
    myForm.destroy();                    
    });
    ... 
    works on FireFox, but in IE7 its doing some funny things that are driving me nuts.
    When closing the form (using close button), then opening again, I get the form fields duplicating. Also, when I use the cross-close button on the top right corner, the form hides but leaves the shadow on the stage with everything else disabled!

    I am reaching a stage where I have to make a decision weither its worth me building this app using ext or not, and if I can't fix this then I think I have to move on. But I REALLY dont want to .

    You can test it HERE
    username: admin
    password: admin
    Go to "Add Newsletter", on the grid click on "add"

    Someone PLEASE have a look.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    How are yuo creating the form? Because it only contains the items that were added directly to it, and not to nested layouts, so the code which loops through all fields destroying them won't get those inner fields.

    But you shouldn't be building, destroying then recreating the same DOM structure. Just create the dialog and form once when needed and reuse it. Just hide the dialog and reset the form when done with them, and show them again when needed again.

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    73

    Default

    Here how I build the form:

    First, I call a createDialog function that returns a created dialog instance. I pass an object to this function that includes the 'div' (the div is hard coded within the html, not built on the fly. The div html is mentioned here on previous post above) name to hold the dialog and some other properties for the created dialog like width, height...etc

    createDialog()
    PHP Code:
    /* create dialog
    -------------------------------*/
    function createDialogparamObj )
    {
        var 
    thisDialog = new Ext.LayoutDialogparamObj.name, {
               
    modal:true,
                
    autoTabstrue,
                
    proxyDrag:true,
                
    resizable:false,
                
    width: (typeof paramObj.width == 'undefined') ? 180 paramObj.width,
                
    height: (typeof paramObj.height == 'undefined') ? 120 paramObj.height,
                
    shadow:true,
            
    center: {
                    
    autoScrolltrue,
                    
    tabPosition'top',
                    
    closeOnTabtrue,
                    
    alwaysShowTabs: (typeof paramObj.tabbed == 'undefined') ? false paramObj.tabbed
                
    }
            });

            
    thisDialog.addKeyListener(27thisDialog.hidethisDialog); 
            
    thisDialog.addButton('Cancel', function()
            {
                    
    //destroyForm belongs to the Form.js
                    //it runs the destroy function on the form being passed
                    
    App.app.getComponent("Form").destroyForm(paramObj.formName);
                    
    thisDialog.hide();
            });
            return 
    thisDialog;
    }; 
    The folloing function creates the form. It calls createDialog() to create a dialog instance, then uses it to add a form into it.

    createNewsletterForm()
    PHP Code:
    /* create newsletter form
    -------------------------------*/
    createNewsletterForm : function ( paramObj )
    {
        if(
    addNewsletterForm)
        {
            
    addNewsletterForm.destroy();
            
    addNewsletterForm null;
            
    addInstanceDlg null;
        }

        
    addNewsletterForm = new Ext.form.Form({
            
    labelAlign'right',
            
    urlApp.baseUrl +'index.php/newsletters/createNewsletter',
            
    labelWidth80
        
    });
                
        
    addNewsletterForm.column({width500labelWidth:120style:'margin-left:8px;margin-top:8px'});
                
        
    addNewsletterForm.fieldset(
            {
    legend:'New Newsletter'},
        
            new 
    Ext.form.DateField({
                
    fieldLabel'Publish Date',
                
    name'date_publish',
                
    width:90,
                
    format'd/m/Y',
                
    allowBlank:false
            
    }),
        
            new 
    Ext.form.TextArea({
                
    fieldLabel'Welcome Message',
                
    name'w_msg',
                
    width:340,
                
    height:100,
                
    growfalse,
                
    preventScrollbars:false,
                
    value''
            
    }),
        
            new 
    Ext.form.TextArea({
                
    fieldLabel'Notes',
                
    name'notes',
                
    width:340,
                
    height:100,
                
    growfalse,
                
    preventScrollbars:false,
                
    value''
            
    })
        );
                
        
    addNewsletterForm.applyIfToFields({width:255});
        
    addNewsletterForm.render('a-addInstance-form');
        
    addNewsletterForm.end();
        
    forms["addNewsletterForm"] = addNewsletterForm;
                
        if(!
    addInstanceDlg)
        {
            
    addInstanceDlg App.app.getComponent("DialogManager").getNewDialog({ name:'a-addInstance-dlg' tabbed:false width:540 height:360 formName:'addNewsletterForm' });
            
    addInstanceDlg.addButton('Add'addNewsletteraddInstanceDlg);

            var 
    layout addInstanceDlg.getLayout();
            
    layout.beginUpdate();
            
    layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title'Add Newsletter'}));
            
    layout.endUpdate(); 
                                
            
    addInstanceDlg.show();
        };

    Can you see anything wrong here?

  5. #5
    Sencha User
    Join Date
    Sep 2007
    Posts
    73

    Default

    Quote Originally Posted by Animal View Post
    But you shouldn't be building, destroying then recreating the same DOM structure. Just create the dialog and form once when needed and reuse it. Just hide the dialog and reset the form when done with them, and show them again when needed again.
    I see loads of posts here recommending creating the containing div tags at run time (eg. using domHelper), adding the dialog and form to those created divs. Then once you are done with the form, destroy the form and remove the div tags. Iterate this process again for each time you need the dialog/form.

    It would be great if some of the experienced ext users would briefly explain the pros/cons of each method and in which situation to use which.

    And, for ext2.0, do we need to worry about this issue?

  6. #6
    Ext User
    Join Date
    Aug 2007
    Location
    Argentina
    Posts
    59

    Default

    I run into the same problem and have a layout very similar like yours. As you, I am creating the grid in a inner page but the dialogs open in the main layout page. The problem appears when reloading the inner page. Because of creating the form's div container directly in the layout markup, after reloading the inner page the markup is not being cleared and holds the old instance of the form. You can see that with a simple alert like

    alert(Ext.get('idofformdivcontainer').dom.innerHTML);

    Seems that maybe creating that container via dom would be a better approach. I'll try to do that and see what happens.

    Regards

Posting Permissions

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