Ext.Form spanning multiple tabs

[gkassyou]

Seldon, can you post an example. I can't seem to get it to work.

Thanks

[kubens]

Here you can see the source of a working example

Ext.onReady(function(){

  var frm = new Ext.form.Form({
      autoCreate:false,
      labelWidth: 75
  });
  var frmTabs = new Array();
  frmTabs[0] = frm.container(
             {el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
              new Ext.form.TextField({
                  fieldLabel: 'First Name',
                  name: 'first',
                  width:175
              }),
          
              new Ext.form.TextField({
                  fieldLabel: 'Last Name',
                  name: 'last',
                  width:175
              }),

              new Ext.form.TextField({
                  fieldLabel: 'Email',
                  name: 'email',
                  vtype:'email',
                  width:175
              })
            );
  frmTabs[1] = frm.container(
             {el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
              new Ext.form.TextField({
                  fieldLabel: 'Company',
                  name: 'company',
                  width:175
              }),
          
              new Ext.form.TextField({
                  fieldLabel: 'Branch',
                  name: 'branch',
                  width:175
              })
            );

  frm.render('divForm');

  var tabPanel=new Ext.TabPanel('divTabPanel');
  tabPanel.addTab(frmTabs[0].getEl().id,'Personal');
  tabPanel.addTab(frmTabs[1].getEl().id,'Company');
  tabPanel.activate(0);

});

<div id="divForm">
  <div id="divTabPanel"></div>
</div>

Br
Wolfgang

[mdissel]

In your sample i'm missing the form tag around the input controls. Is that correct?

Thanks
Marco

[gkassyou]

Thanks kuben.

[kubens]

@mdissel

no this was not correct I overworked the example. Now the form tag is duly created around the input tags Furthermore you can see in the source that I assigned the tabs to a form container.

// container for tabs
var frmContainerTabs = frm.container();
frm.end();
...
var tabPanel=new Ext.TabPanel(frmContainerTabs.el);

This enables you to controll the position of the tabs inside the layout stack of the form.

Br
Wolfgang

[seldon]

FYI: the overrides that i mentioned are necessary when you want the form tabs to be the contentpanel tabs of a layout region. (that's the scenario that i described)

[gkassyou]

How to create the tabbed form within a basic dialog that is created on the fly.

[leshcoff]

Hey friends, the example is good. but I have a problem I want group my fields like a fieldset in every tabs, but if I apply a fieldset into form.container ( frm.fieldset() ) I get a problem, the fieldset is repeat into 2 tabs. I dont know how fix this problem, I attach 2 img.

Help me.

[leshcoff]

Kubens.

Your fixed example link dosen

[kubens]

I fixed the link. I think I need a separate Ext playground

Br
Wolfgang