close extjs window after form submission

Question

I have an extjs2 formpanel:

   var fsf = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        id: 'formPanel',
        title: 'Simple Form with FieldSets',
        bodyStyle:'padding:5px 5px 0',
        width: 550,

        items: [{
            xtype:'fieldset',
            checkboxToggle:true,
            title: 'User Information',
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            collapsed: true,
            items :[{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }
            ]
        },{
            xtype:'fieldset',
            title: 'Phone Number',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }
            ]
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                var form = Ext.getCmp('formPanel').getForm();
                if(form.isValid())
                    form.submit({
                        waitMsg:'Loading...',
                        url: 'RepeatSession.jsp',
                        success: function(form,action) {
                            //we have to close the window here!!
                        },
                        failure: function(form,action){
                            Ext.MessageBox.alert('Erro',action.result.data.msg);
                        }
                    });
            }
        },{
            text: 'Cancel'
        }]
    });

and a window:

 win = new Ext.Window(
            {
                layout: 'fit',
                width: 500,
                height: 300,
                modal: true,
                closeAction: 'hide',
                items: fsf
            });
     win.show();

As you can see, the form panel is inside the window as an item. I have to close the window after a successful form submission but I have no idea how to access the window object inside my success handler.

How can i hide the window after successful form submission?

AndreKR AndreKR · Accepted Answer · 2012-02-26T19:29:58

Just save a reference to the window or one of its children before creating the form. For example you can use the button paremeter that the handler function gets passed:

        handler: function(button, e){

[...]

                    success: function(form,action) {
                        button.up('.window').close();
                    },

Or, as you apparently already have the window in a variable (win), you can just use that to close the window:

win.close();

but that depends on the variable win being available inside the success function, which we cannot assume from the code you gave.

close extjs window after form submission

1 Answers