Ext.Form spanning multiple tabs

[gkassyou]

I'm trying to have a form with multiple elements spanning multiple tabs so therefore the submit button will submit the form with data from all the fields in the other tabs. Any ideas how to do that.

[tryanDLS]

Search is your friend

See this http://extjs.com/forum/showthread.ph...iple+tabs+form and this http://extjs.com/forum/showthread.ph...iple+tabs+form

[gkassyou]

Yes but I'm trying to use the Ext.Form class laid out in multiple tabs

[tryanDLS]

I think you have the same issues with regard to how the form is laid out in relation to the tab containers.

[VinylFox]

Neither of those threads deal with Ext.form forms.

I found this statement that jack made about 2 weeks ago...

1. There is no built in way to span a form across tabs currently. However, because of the plug-in nature of the form layouts, I'm sure it won't be long before one pops up. For a normal form in a dialog, you would render to the dialog's body.

Im guessing that this is still an accurate statement.

[seldon]

Ok, im looking for a way to do this too. Is there anyone who has already managed to do this? Pls help us out!!

[Pagebaker]

I'm currently running into this also, I really need to get a solution for this and I'm trying to get something working right now. Once it get it working I'll post my results in here.

[seldon]

Ok,

I got it to work (using some help from Jack ). The trick is this:

in your form definition, specify: autoCreate: false.

Then for each container in your form that you want to appear on a new tab, specify an element in its config, as in:

var c = form.container({el:Ext.DomHelper.append(document.body, {tag:'div'}), title: 'Personal info'}, ...

Then when creating a dialog, loop through all the (top-level) form containers and for each container do: c.getEl() and use this as the contentPanel (=tab) container element.

Now, to get all this to work properly, make sure that your dialog is autocreated as a form tag, so in the dialog config:

 autoCreate: {tag: 'form', method:'POST', onSubmit:false},

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

That's it folks!

Cheers,

Seldon

[marvinhorst]

I have a BorderLayout with a form inside the center content panel. I want to use tabs in this form. I tried a version of your method and everything appears to work accept the tabpanel doesn't respond to the click event (can't activate other tabs). I can activate using javascript.

My HTML markup

  <div id="center" class="x-layout-inactive-content">
    <form id="center_form"  class="x-box-mc">
      <div id="tabpanel"></div>
    </form>
  </div>

I created the form container as a child of the form element, because document.body wasn't working.

tabs[0] = form.container({el:Ext.DomHelper.append(Ext.get('center_form'), {tag:'div'}), title: 'Personal info'});

Then I rendered to the form element.

form.render('center_form');
var tPanel=new Ext.TabPanel('tabpanel');
tPanel.addTab(tabs[0].getEl(),"Personal");

[marvinhorst]

I tried a version of your method and everything appears to work accept the tabpanel doesn't respond to the click event (can't activate other tabs). I can activate using javascript.

Actually the tabpanel is responding to click events, but it always activates the last tab even if I'm clicking another tab.