Question

I have this struct:

Example.Form = Ext.extend(Ext.form.FormPanel, {
// other element

 , onSuccess:function(form, action) {
 }

}
Ext.reg('exampleform', Example.Form);

Ext.onReady(function() {
            var win = new Ext.Window({
                id:'formloadsubmit-win'
                ,items:{id:'add', xtype:'exampleform'}
            });
            win.show();
})

I delete extra code above…

I want to do this: when I submit form on function-> onSuccess in Example.Form class able to close window on body. (When success results were submited and than the body of the window that opens become closed)

I apologize for my bad English.

Answer 1

The structure of the code should allow a place to store the components you are registering as xtypes. It should also have a top level namespace for the components that make up the app. This way you can always reference the parts of your app. It is also a good idea to break out the controller logic. For a small app, a single controller may work fine but once the app grows it is good to have many controllers for the app, one for each piece.

Here is a modified version of the code you put in that example. It will handle the success event and is structured to fit the recommendations noted above.

    Ext.ns('Example');
    /* store components to be used by app */
    Ext.ns('Example.lib');
    /* store instances of app components */
    Ext.ns('Example.app');

    Example.lib.Form = Ext.extend(Ext.form.FormPanel, {
    // other element

     // moved to app controller
     //onSuccess:function(form, action) {
     //}

    });

    Ext.reg('exampleform', Example.lib.Form);

    Example.lib.FormWindow =  Ext.extend(Ext.Window,{
        initComponent: function(){
            /* add the items */
            this.items ={itemId:'add', xtype:'exampleform'};

            /* ext js requires this call for the framework to work */
            Example.lib.FormWindow.superclass.initComponent.apply(this, arguments);
        }
    });

    Ext.reg('exampleformwin', Example.lib.FormWindow);

    /*
        manage/control the app
    */
    Example.app.appController = {
        initApp: function(){
            Example.app.FormWindow = Ext.create({xtype:'exampleformwin', id:'formloadsubmit-win'});
            Example.app.FormWindow.show();

            /* get a reference to the 'add' form based on that item id and bind to the event */
            Example.app.FormWindow.get('add').on('success', this.onAddFormSuccess, this );

        },

        /* the logic to handle the add-form's sucess event */
        onAddFormSuccess: function(){
            Example.app.FormWindow.hide();
        }

    }

    Ext.onReady(function() {
        /* start the app */
        Example.app.appController.initApp()
    })