[EXT Develop Log]--Multiple tabs in one form

Sometimes, We have a form with multiple elements, and so, put them together will show confus.

How to divide the form with tabs and  submit the button will submit the form with all tabs?

In Ext API ,I use the method "form.container()" of the form but not work great..

Finally ,I find resolve mehtod by dj in extjs forum,to extend and make tabs in ext.form,copy this extend code in ur js:

js 代码

Ext.form.DialogTab = function(config){
    Ext.form.DialogTab.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.DialogTab, Ext.form.Layout, {
    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-dlg-tab'},

    onRender : function(ct){
        Ext.form.Column.superclass.onRender.call(this, ct);
        if(this.title || this.legend){
            this.el.dom.title = this.title || this.legend;
        }
    }
});

Ext.form.DialogForm = function(config){
    Ext.form.DialogForm.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.DialogForm, Ext.form.Form, {
    getDialog : function(force){
        if (force&&!this.dialog){
            this.dialog = new Ext.BasicDialog(document.body, Ext.apply({}, this, {id:Ext.id()}));
        }
        return this.dialog;
    },
    tab : function(c){
        var col = new Ext.form.DialogTab(c);
        this.start(col);
        if(arguments.length > 1){ // duplicate code required because of Opera
            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
            this.end();
        }
        return col;
    },
    render : function(ct){
        Ext.form.DialogForm.superclass.render.call(this, ct);


        var dialog = this.getDialog(true);

        while (this.el.dom.firstChild) {
            Ext.fly(this.el.dom.firstChild).appendTo(dialog.body);
        }
        dialog.bwrap.insertFirst(this.el.dom);
        dialog.body.appendTo(this.el);

        if (dialog.body.child('.x-dlg-tab', true)) {
            dialog.autoTabs = true;
            dialog.body.setStyle("overflow", "auto");
            dialog.initTabs();
            dialog.syncBodyHeight();
        }

    },
    applyTo: function(dialog){
        this.dialog = dialog;
        this.render(this.getDialog(true).body);
    }
});

So your code with dialogForm will just like:

js 代码

var myForm = new Ext.form.DialogForm({
    url:'ur url',
    labelAlign: 'right',
    labelWidth: 75
});

myForm .tab({title:"tab1"});
myForm .fieldset(...);
myForm .tab({title:"tab2"});
myForm .fieldset(...);

var myDialog =  new Ext.BasicDialog("my-dlg", { ... });

myForm.applyTo(myDialog );

myDialog.show('dialog-div');

                            

----- By   kkbear