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

      0  

    Default how to submit a form split over several tabs?

    how to submit a form split over several tabs?


    Hi,

    I have a form split over several tabs in a BasicDialog (with autoTabs set to true). and I can't submit it. Can someone point me in the right direction? This is the markup used:
    Code:
    <form action="/app/session/set_filter" name="filter-form" id="filter-form">
        <div class="ydlg-tab" title="User">
            User:<select name="filter_user" multiple="multiple"><option value="nil">All</option><option value="user1">User One</option><option value="user2">User Two</option></select>
        </div>
        <div class="ydlg-tab" title="Group">
            Group:<select name="filter_group" multiple="multiple"><option value="nil">All</option><option value="group1">Group 1</option><option value="group2">Group 2</option></select>
        </div>
        <div class="ydlg-tab" title="Type">
            Type:<select name="filter_type" multiple="multiple" ><option value="nil">All</option><option value="urgent">Urgent</option><option value="express">Express</option></select>
        </div>
        <div class="ydlg-tab" title="Dates">
            Between:<input size="10" type="text" name="filter_from"></input> and <input size="10" type="text" name="filter_to"></input>
        <input type="submit"></input>
        </div>
    </form>
    In the dom I see the form (with no child) under a div with class "ydlg-bd ytabs-top".

    Thanks in advance.

    Raph

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The way to do this is to create your BasicDialog with a body element which IS a form.

    Code:
    var d = new Ext.BasicDialog("myDlgContainer", {
        autoCreate: {
            tag: "div", id:"myDlgContainer", children: [ {
                tag: "div" }, {
                tag: "form", name: "theForm", action: "/foo/bar.do", method:"POST"} , {
                tag: "div"
            } ]
        }
    });
    Or, the equivalent HTML markup if that's how you're creating the dialog.

    That way, all your Tab containers will be inside a form.

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

      0  

    Default


    That's working indeed. Thanks very much for the fast answer!

    Raph

  4. #4
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    Animal, the autoCreate config you suggest is not creating the correct markup for me. I get:
    HTML Code:
    <div />
    <form ...... />
    <div />
    ... The rest of the dialog (tabs etc) ....
    So the tabs are not being created in the form.

    Any ideas?

    EDIT: The Dialog doesn't seem to want to use <div /><form /><div /> as the header, body and footer respectively. Instead it's creating its own after that markup.

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

      0  

    Default


    I'm guessing based on the date of Animal's post that was a solution based on .33 code. The ctor of BasicDialog has changed some in 1.0. If you're going to autocreate a complex dialog, you have to add the css class names to the appropriate elements you create b/c the code looks for them to determine header,footer,body. If it doesn't find the class names it adds the divs. You'll have to look at the code to see what I mean if you want to pursue that approach.

Similar Threads

  1. ID of submit within form masks submit function
    By aconran in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2007, 12:08 AM
  2. Basic Dialog Form plus submit example?
    By rob30UK in forum Ext 1.x: Help & Discussion
    Replies: 26
    Last Post: 13 Jan 2007, 9:11 AM
  3. BasicDialog: how to submit a form without AJAX.
    By moraes in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jan 2007, 7:02 AM
  4. BasicDialog with one TabPanelItem a try to submit form
    By JuanParraC in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 4 Dec 2006, 12:15 AM
  5. Basic Dialog and form submit
    By JC in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 21 Nov 2006, 12:44 AM

Thread Participants: 3