Ext.Form spanning multiple tabs

[gitey]

Seldon, I did try the way u suggested. Am rendering my form in LayoutDialog. But my form.submit() doesnt seem to work. Its not sending the parameters that i type in my form. Ive also fixed(override) the code of form.render()Any idea why this is happening??Can you please post me your example? I think the problem is of adding SUBMIT button. Ive have added it in my layout.
I did try adding submit like
form.addButton(...........);
But even this doesnt seem to work. All my values sent to the server are null.
Please reply and thanks in advance.
regards
Gitey

[devnull]

Ok I haven't been using Ext very long and am completely lost here:

Then one final override is required! To make sure that the form.getValues() method works, you must override the form.render() method and replace the

this.initEl(..) with:

  this.initEl(this.autoCreate !== false ? ct.createChild(o) : ct);

As best I can tell, I was supposed to do something like this:

Ext.override(Ext.form.Form, {
	render : function(ct){
        ct = Ext.get(ct);
        var o = this.autoCreate || {
            tag: 'form',
            method : this.method || 'POST',
            id : this.id || Ext.id()
        };
        //this.initEl(ct.createChild(o));
        this.initEl(this.autoCreate !== false ? ct.createChild(o) : ct);

        this.root.render(this.el);

        this.items.each(function(f){
            f.render('x-form-el-'+f.id);
        });

        if(this.buttons.length > 0){
                        var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
            }}, null, true);
            var tr = tb.getElementsByTagName('tr')[0];
            for(var i = 0, len = this.buttons.length; i < len; i++) {
                var b = this.buttons[i];
                var td = document.createElement('td');
                td.className = 'x-form-btn-td';
                b.render(tr.appendChild(td));
            }
        }
        if(this.monitorValid){             this.startMonitoring();
        }
        return this;
    }
})

but I just get an error in firebug when it gets to the form.render():

_92.elements has no properties
[Break on this error] (function(){var _1;Ext.lib.Dom={getViewWidth:function(_2){return _2?this.getDocu...
ext-base.js (line 12)

Any idea what's going on?
This is a pretty large form (about 30 elements) so I would rather not post the whole code...
If I don't override, then everything works great, except no values get submitted (and form.getValue() returns nothing).
Ext version is 1.1 Beta 2 if it helps.

[dj]

For rendering a Form with tabs in a BasicDialog I'm using this (in Ext 1.x, Ext 2.x will have a slick way to do that built-in AFAIK):

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

        //return; // temporarily disable
            
        // reordering, inject all form-elements into the dialog body and then 
        // append the dialog body to the form
        // before: dialog.bwrap > dialog.body > form.el
        // after:  dialog.bwrap > form.el > dialog.body
        //
        // (is needed so that the form elements do not get
        //  outside the form if auto-tabs are created)
        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);
        
        // create tabs
        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);
    }
}); 

A usage example (altered from examples/form/dynamic.js):

    /*
     * ================  Form 2  =======================
     */
    var top = new Ext.form.DialogForm({
        labelAlign: 'top'
    });

    top.tab(
        {title:"tabtitle", width:282}, // precise column sizes or percentages or straight CSS
        new Ext.form.TextField({
            fieldLabel: 'First Name',
            name: 'first',
            width:225
        }),

        new Ext.form.TextField({
            fieldLabel: 'Company',
            name: 'company',
            width:225
        })
    );

    top.tab(
        {title:"tabtitle", width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
        new Ext.form.TextField({
            fieldLabel: 'Last Name',
            name: 'last',
            width:225
        }),

        new Ext.form.TextField({
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email',
            width:225
        })
    );

    top.tab({title:"tabtitle"},
        new Ext.form.HtmlEditor({
            id:'bio',
            fieldLabel:'Biography',
            width:550,
            height:200
        })
    );

    top.addButton('Save');
    top.addButton('Cancel');

    var dialog = new Ext.BasicDialog(document.body, {title:"form title", width:500, height:500, id:Ext.id()}); 

    top.applyTo(dialog);

[devnull]

I really wish this helped me, but it just blows up in a rather spectacular manner.
Firebug throws out an infinite number of this:

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://10.0.0.1/lib/ext/ext-all-debug.js :: anonymous :: line 23068" data: no]

[dj]

here is a working example of my Ext.form.DialogForm code posted above. The one in my last post has some errors in it.
http://ext.wirsind.info/dialog-with-tabs-and-form.html

I'm not using the class anymore, I'm switching to Ext 2.0 right now and there are sooo much better ways to put a tabbed form into a window.

[devnull]

Thanks so much, that did the trick.

[cutigersfan]

I've used this example class and all seems to be working very well. However, I have found that if I use a combobox class, the "Name" gets posted, not the "value". When debugging I found that this is due to the "serialize" function that is passed the form name. It grabs the value from the underlying txt field, not the js object.

Anyone got a solution or worked around this?

[ingkat]

here is a working example of my Ext.form.DialogForm code posted above. The one in my last post has some errors in it.
http://ext.wirsind.info/dialog-with-tabs-and-form.html

I'm not using the class anymore, I'm switching to Ext 2.0 right now and there are sooo much better ways to put a tabbed form into a window.

How to place the boxWrap in each tab on your example. Thank in advance

[ccquiles]

Any idea how to apply this to an editable grid? I would like to have an editable grid that spans mutliple tabs... I have thought about using hide and show to hide columns on the activate event of a specific tab, but there has got to be some way to use these ideas towards an easier solution... any ideas?

Thanks!

[methodz]

Any idea on how to get this concept to work with a layout dialog? Even just making the outer tags "form" tags should work...