1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    170
    Vote Rating
    0
    gkassyou is on a distinguished road

      0  

    Default Ext.Form spanning multiple tabs

    Ext.Form spanning multiple tabs


    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.

  2. #2

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    170
    Vote Rating
    0
    gkassyou is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    225
    Vote Rating
    0
    seldon is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Apr 2007
    Posts
    36
    Vote Rating
    0
    Pagebaker is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    225
    Vote Rating
    0
    seldon is on a distinguished road

      0  

    Default


    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:

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

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

    Code:
      this.initEl(this.autoCreate !== false ? ct.createChild(o) : ct);
    That's it folks!

    Cheers,

    Seldon

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    24
    Vote Rating
    0
    marvinhorst is on a distinguished road

      0  

    Default


    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
    Code:
      <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.
    Code:
    tabs[0] = form.container({el:Ext.DomHelper.append(Ext.get('center_form'), {tag:'div'}), title: 'Personal info'});
    Then I rendered to the form element.
    Code:
    form.render('center_form');
    var tPanel=new Ext.TabPanel('tabpanel');
    tPanel.addTab(tabs[0].getEl(),"Personal");

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    24
    Vote Rating
    0
    marvinhorst is on a distinguished road

      0  

    Default


    Quote Originally Posted by marvinhorst View Post
    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.