Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 40

Thread: Ext.Form spanning multiple tabs

  1. #11

    Default

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

    Thanks

  2. #12
    Sencha User
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    136

    Default

    Here you can see the source of a working example

    Code:
    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);
    
    });
    Code:
    <div id="divForm">
      <div id="divTabPanel"></div>
    </div>
    Br
    Wolfgang

  3. #13
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    608

    Default

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

    Thanks
    Marco

  4. #14

    Default

    Thanks kuben.

  5. #15
    Sencha User
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    136

    Default

    @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.

    Code:
    // 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

  6. #16
    Ext User
    Join Date
    Mar 2007
    Posts
    225

    Default

    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)

  7. #17

    Default

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

  8. #18

    Default fieldset into container

    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.
    Attached Images Attached Images

  9. #19

    Default

    Kubens.

    Your fixed example link dosen

  10. #20
    Sencha User
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    136

    Default

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

    Br
    Wolfgang

Page 2 of 4 FirstFirst 1234 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •