What's New?

[CLOSED] How can I have a tab panel with multiple tabs with form fields having all of them share the same FormID?

  1. #1
    Mar 09, 2011, 2:38 PM

    [CLOSED] How can I have a tab panel with multiple tabs with form fields having all of them share the same FormID?

    How can I have a tab panel with multiple tabs, each tab containing form fields and have all form fields (acroll all tabs) share a single FormID?

    I tried assigning the same FormID to multiple form panels but that obviously didn't work (just like multiple html form elements don't work with a single POST).

    This is how far I got but the lay-out is all wrong (I actually see only 2% of the height of the form panel. Giving the form panel a fixed height makes things better but still its not ok (the background color is different, font sizes are off etc.).

    <ext:Window ID="Window" runat="server" Modal="true" Closable="true" CloseAction="Close" AutoDataBind="true" Width="450" Height="400" Resizable="false">
    <Content>
        <ext:FormPanel ID="FormPanel" runat="server" FormID="UserForm" Border="false" LabelAlign="Left" BodyStyle="background-color: transparent;">
            <Items>
                <ext:BorderLayout runat="server">
                    <Center>
                        <ext:TabPanel runat="server" Border="false" BodyStyle="background-color: transparent;">
                            <Items>
                                <ext:Panel ID="FieldsPanel1" runat="server" Padding="4" Border="false" AutoScroll="true" BodyStyle="background-color: transparent;">
                                    <Items>
                                        <ext:TextField ID="UsernameTextField" runat="server" Name="Username" />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="FieldsPanel2" runat="server" Padding="4" Border="false" AutoScroll="true" BodyStyle="background-color: transparent;">
                                    <Items>
                                        <ext:TextField ID="SurnameTextField" runat="server" Name="Surname" />
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:TabPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:FormPanel>
    </Content>
</ext:Window>
    Last edited by geoffrey.mcgill; Mar 09, 2011 at 8:32 PM. Reason: [CLOSED]
  2. #2
    Mar 09, 2011, 5:03 PM
    Hi,

    I can suggest you the following layout configuration.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Window 
        runat="server" 
        Width="450" 
        Height="400" 
        Resizable="false" 
        Layout="FitLayout">
        <Items>
            <ext:FormPanel runat="server" Layout="FitLayout">
                <Items>
                    <ext:TabPanel runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="Tab1" Layout="FormLayout">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="TextField1" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="Tab2" Layout="FormLayout">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="TextField2" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>
    Also it would be good if you clarify the initial requirement. I guess you use DIrectEvent with FormID, but not sure.
  3. #3
    Mar 09, 2011, 6:31 PM
    Splendid, that was very informative! I like they you set layout=FitLayout on each level, that makes it more compact.
    I am using MVC by the way, I load the window from a partial view.
  4. #4
    Mar 09, 2011, 6:50 PM
    Glad to help.

    But I don't understand is the issue solved?
  5. #5
    Mar 09, 2011, 6:52 PM
    Yes it is!
  6. #6
    Mar 09, 2011, 7:17 PM
    Oh, I have one more question: why is the form field in the second panel only posted when I activate the tab it is on first? And how do I make it post the field anyway?
  7. #7
    Mar 09, 2011, 7:19 PM
    Because the tabs are rendered when they are activated at the first time.

    To change it please set DeferredRender="false" for TabPanel (DeferredRender="true" by default)
  8. #8
    Mar 09, 2011, 8:15 PM
    Thanks again, that works perfectly. Solved!

Similar Threads

  1. How to validate multiple form fields at once server side, and maintain error message display?
    By chearner in forum 1.x Help
    Replies: 0
    Last Post: Oct 27, 2011, 10:02 PM
  2. [CLOSED] Advice for dynamic multiple tabs
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 04, 2011, 10:18 AM
  3. [CLOSED] FormPanel composite fields not accessible whose items span multiple tabs in tabpanel
    By michelledmello in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 06, 2010, 8:51 AM
  4. [CLOSED] Multiple UserControls, Column and Tabs
    By CMA in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 15, 2010, 12:09 PM
  5. How to sorted by multiple fields?
    By bruce in forum 1.x Help
    Replies: 0
    Last Post: May 04, 2009, 4:10 AM

Posting Permissions