[0.8] Master with Tabpanel Layout

  1. #1

    [0.8] Master with Tabpanel Layout

    Hello,

    I have been trying to accomplish a fitlayout like the examples, sorry for using this old version but i got i project that i would not like to upgrade yet. My problem is that when i try to lower my resolution its impossible to me to make scrollbars to appear with an autoheight and autowidth. Please i need help. I have been searching and found a lot of pots but none of them worked for me.

    or How to open in the tab with layout fit like the example but without the Treeview, tabs are going to be webpages...

    MASTER
    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="URL.master.vb"
        Inherits="URLs" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <cool:ScriptManager ID="smMaster" runat="server">
        </cool:ScriptManager>
        <cool:ViewPort ID="vpMaster" runat="server">
            <Body>
                <cool:BorderLayout ID="BorderLayout1" runat="server">
                    <North>
                        <cool:Panel ID="pnNorth" runat="server" Height="100">
                            <Body>
                                <asp:ContentPlaceHolder ID="head" runat="server">
                                </asp:ContentPlaceHolder>
                            </Body>
                        </cool:Panel>
                    </North>
                    <Center>
                        <cool:Panel ID="pnCenter" runat="server" AutoHeight="true">
                            <Body>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder>
                            </Body>
                        </cool:Panel>
                    </Center>
                </cool:BorderLayout>
            </Body>
        </cool:ViewPort>
        </form>
    </body>
    </html>
    ParentPage
    This page calls others URLs.
    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Asalariados.Master"
        CodeBehind="URLsControlPanel.aspx.vb" Inherits="URLsControlPanel" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <cool:Panel ID="pnCenter" runat="server">
            <Body>
                <cool:FitLayout ID="FitLayout1" runat="server">
                    <cool:TabPanel ID="tbMenu" runat="server" ActiveTabIndex="0" Height="700">
                        <Tabs>
                            <cool:Tab ID="tabURL3" runat="server" Title="3. URL3" Icon="BulletCross" AutoHeight="true"  AutoScroll="true">
                                <Body>
                                                <cool:Panel ID="Panel3" runat="server" AutoHeight="true">
                                                    <AutoLoad Url="URL3.aspx" ShowMask="true" MaskMsg="Loading..." Mode="IFrame"
                                                        ReloadOnEvent="true" NoCache="true">
                                                    </AutoLoad>
                                                </cool:Panel>
                                </Body>
                            </cool:Tab>
                        </Tabs>
                    </cool:TabPanel>
                </cool:FitLayout>
            </Body>
        </cool:Panel>
    </asp:Content>
    ChildPage
    Where main Controls are.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="URL3.aspx.vb"
        Inherits="Asalariados.URL3" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <!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></title>
    </head>
    <body>
    <form id="frmDependientes" runat="server">
        <cool:ScriptManager ID="smurl3" runat="server" Locale="es-do" AjaxMethodNamespace="url3">
        </cool:ScriptManager>
        <cool:Store ID="sturl3" runat="server" OnRefreshData="url3_Refresh">
            <Reader>
                <cool:JsonReader>
                    <Fields>
                        <cool:RecordField Name="name1" Type="Date" />
                        <cool:RecordField Name="name2" Type="String" />
                        <cool:RecordField Name="name3" Type="String" />
                    </Fields>
                </cool:JsonReader>
            </Reader>
        </cool:Store>
        <cool:Spotlight ID="spotURL3" runat="server" Easing="EaseOut" Duration="0.3">
        </cool:Spotlight>
        <cool:Panel ID="Panel1" runat="server" Height="600">
            <Body>
                <cool:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <cool:GridPanel ID="gpurl3" runat="server" StoreID="sturl3" StripeRows="true"
                            Title="Dependientes" TrackMouseOver="true" AutoWidth="true" Height="300">
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <cool:Column Header="NAME1" Width="140" DataIndex="name1" MenuDisabled="true" />
                                    <cool:Column Header="NAME2" Width="140" DataIndex="name2" MenuDisabled="true" />
                                    <cool:Column Header="NAME3" Width="80" DataIndex="name3" MenuDisabled="true">
                                        <Renderer Fn="tipoRelacion" />
                                    </cool:Column>
                                    <cool:CommandColumn Width="30">
                                        <Commands>
                                            <cool:GridCommand Icon="BulletCross" CommandName="Delete" StandOut="true">
                                                <ToolTip Text="Delete" />
                                            </cool:GridCommand>
                                        </Commands>
                                    </cool:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <cool:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                                </cool:RowSelectionModel>
                            </SelectionModel>
                            <LoadMask ShowMask="true" Msg="Loading..." />
                        </cool:GridPanel>
                    </Center>
                    <South>
                        <cool:FormPanel ID="frmpnurl3" runat="server" Title="Add Url3"
                            BodyStyle="padding:5px;" ButtonAlign="Right" Height="300" LabelWidth="150" MonitorPoll="500"
                            MonitorValid="true">
                            <Body>
                                <cool:FormLayout ID="FormLayout1" runat="server">
                                    <cool:Anchor Horizontal="30%">
                                        <cool:DateField ID="dfurl3" runat="server" FieldLabel="date url3"
                                            AllowBlank="false" ReadOnly="true">
                                        </cool:DateField>
                                    </cool:Anchor>
                                    <cool:Anchor Horizontal="30%">
                                        <cool:TextField ID="tfname1" runat="server" FieldLabel="name1" AllowBlank="true"
                                            <Listeners>
                                                <Render Handler="this.el.dom.setAttribute('onPaste', 'return false');" />
                                            </Listeners>
                                        </cool:TextField>
                                    </cool:Anchor>
                                    <cool:Anchor Horizontal="40%">
                                        <cool:TextField ID="tfname2" runat="server" FieldLabel="Name2" AllowBlank="false" />
                                    </cool:Anchor>
                                    <cool:Anchor Horizontal="40%">
                                        <cool:TextField ID="tfnam3" runat="server" FieldLabel="name3"/>
                                    </cool:Anchor>
                                </cool:FormLayout>
                            </Body>
                            <Buttons>
                                <cool:Button ID="btnSave" runat="server" Text="save">
                                </cool:Button>
                            </Buttons>
                        </cool:FormPanel>
                    </South>
                </cool:BorderLayout>
            </Body>
        </cool:Panel>
    </form>
    
    </body>
    </html>
  2. #2
    Hi,

    I think adding a FitLayout around pnCenter in your ParentPage should help.

    Example

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <cool:FitLayout ID="FitLayout1" runat="server">
        <cool:Panel ID="pnCenter" runat="server">
            <Body>
                <cool:FitLayout ID="FitLayout1" runat="server">
                    <cool:TabPanel ID="tbMenu" runat="server" ActiveTabIndex="0" Height="700">
                        <Tabs>
                            <cool:Tab ID="tabURL3" runat="server" Title="3. URL3" Icon="BulletCross" AutoHeight="true"  AutoScroll="true">
                                <Body>
                                                <cool:Panel ID="Panel3" runat="server" AutoHeight="true">
                                                    <AutoLoad Url="URL3.aspx" ShowMask="true" MaskMsg="Loading..." Mode="IFrame"
                                                        ReloadOnEvent="true" NoCache="true">
                                                    </AutoLoad>
                                                </cool:Panel>
                                </Body>
                            </cool:Tab>
                        </Tabs>
                    </cool:TabPanel>
                </cool:FitLayout>
            </Body>
        </cool:Panel>
      </cool:FitLayout>
    </asp:Content>
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    I think adding a FitLayout around pnCenter in your ParentPage should help.

    Example

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <cool:FitLayout ID="FitLayout1" runat="server">
        <cool:Panel ID="pnCenter" runat="server">
            <Body>
                <cool:FitLayout ID="FitLayout1" runat="server">
                    <cool:TabPanel ID="tbMenu" runat="server" ActiveTabIndex="0" Height="700">
                        <Tabs>
                            <cool:Tab ID="tabURL3" runat="server" Title="3. URL3" Icon="BulletCross" AutoHeight="true"  AutoScroll="true">
                                <Body>
                                                <cool:Panel ID="Panel3" runat="server" AutoHeight="true">
                                                    <AutoLoad Url="URL3.aspx" ShowMask="true" MaskMsg="Loading..." Mode="IFrame"
                                                        ReloadOnEvent="true" NoCache="true">
                                                    </AutoLoad>
                                                </cool:Panel>
                                </Body>
                            </cool:Tab>
                        </Tabs>
                    </cool:TabPanel>
                </cool:FitLayout>
            </Body>
        </cool:Panel>
      </cool:FitLayout>
    </asp:Content>

    Hello,
    Thanks for your answer i did that but i couldnt make the height of the panels to fit the hole screen.

    I would like to know how could i make the funcionality of the examples to work but without treepanel on the left side, only thing is that tabs are going to be static and always visible. All tabs are going to be URLs.
  4. #4
    Hi,

    If you want URL3.aspx to fill the entire iframe, please ensure all components within URL3.aspx are placed within a Viewport component. The Viewport will stretch to fill the full height+width.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    If you want URL3.aspx to fill the entire iframe, please ensure all components within URL3.aspx are placed within a Viewport component. The Viewport will stretch to fill the full height+width.
    Please check my example below. Doesnt do as you say.

    Master
    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Test.master.vb" Inherits="Asalariados.Test" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <!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></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
       <cool:ScriptManager ID="smMaster" runat="server" Locale="es-do">
        </cool:ScriptManager>
        <cool:ViewPort ID="vpMaster" runat="server">
            <Body>
                <cool:BorderLayout ID="BorderLayout1" runat="server">
                    <North>
                        <cool:Panel ID="pnNorth" runat="server" Height="100">
                            <Body>                       
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder>
                            </Body>
                        </cool:Panel>
                    </North>
                    <Center>
                        <cool:Panel ID="pnCenter" runat="server" Height="700">
                            <Body>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                                </asp:ContentPlaceHolder>
                            </Body>
                        </cool:Panel>
                    </Center>
                </cool:BorderLayout>
            </Body>
        </cool:ViewPort>
        </form>
    </body>
    </html>
    Parent
    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Test.Master" CodeBehind="Parent.aspx.vb" Inherits="Asalariados.Parent" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <cool:Panel ID="pnCenter" runat="server">
            <Body>
                <cool:FitLayout ID="FitLayout1" runat="server">
                    <cool:TabPanel ID="tbParent" runat="server" ActiveTabIndex="0" Height="700" EnableTabScroll="true"
                        LayoutOnTabChange="true">
                        <Tabs>
                            <cool:Tab ID="tabChild" runat="server" Title="Child" Icon="BulletCross"
                                 AutoHeight="true" AutoScroll="true">
                                <Body>
                                    <cool:FitLayout ID="FitLayout2" runat="server">
                                       <cool:Panel ID="Panel3" runat="server" AutoHeight="true">
                                        <AutoLoad Url="Child.aspx" ShowMask="true" MaskMsg="Cargando..." Mode="IFrame"
                                            ReloadOnEvent="true" NoCache="true">
                                        </AutoLoad>
                                    </cool:Panel>
                                    </cool:FitLayout>
                                </Body>
                            </cool:Tab>
                        </Tabs>
                    </cool:TabPanel>
                </cool:FitLayout>
            </Body>
        </cool:Panel>
    </asp:Content>
    Child
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Child.aspx.vb" Inherits="Asalariados.Child" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="cool" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <cool:ScriptManager ID="smChild" runat="server" Locale="es-do" AjaxMethodNamespace="Child">
        </cool:ScriptManager>
        <cool:Store ID="stChild" runat="server">
            <Reader>
                <cool:JsonReader>
                    <Fields>
                        <cool:RecordField Name="dummy1" />
                        <cool:RecordField Name="dummy2" Type="Date" />
                        <cool:RecordField Name="dummy3" Type="String" />
                    </Fields>
                </cool:JsonReader>
            </Reader>
        </cool:Store>
        <cool:ViewPort ID="ViewPort1" runat="server" AutoHeight="true" AutoWidth="true">
            <Body>
                <cool:Panel ID="Panel2" runat="server" Height="700">
                    <Body>
                        <cool:FitLayout ID="FitLayout1" runat="server">
                            <cool:Panel ID="Panel1" runat="server" Height="700">
                                <Body>
                                    <cool:FitLayout ID="FitLayout2" runat="server">
                                        <cool:Panel ID="Panel3" runat="server" Height="700">
                                            <Body>
                                                <cool:BorderLayout ID="BorderLayout1" runat="server">
                                                    <Center>
                                                        <cool:GridPanel ID="gpChild" runat="server" StoreID="stChild" StripeRows="true" Title="Child"
                                                            TrackMouseOver="true" AutoWidth="true" Height="300">
                                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                                <Columns>
                                                                    <cool:Column DataIndex="dummy1" Hidden="true" MenuDisabled="true" />
                                                                    <cool:Column Header="dummy2" Width="110" DataIndex="dummy2" MenuDisabled="true">
                                                                        <Renderer Fn="Ext.util.Format.dateRenderer('d/m/Y')" />
                                                                    </cool:Column>
                                                                    <cool:Column Header="dummy2" Width="80" DataIndex="dummy3" MenuDisabled="true" />
                                                                </Columns>
                                                            </ColumnModel>
                                                            <SelectionModel>
                                                                <cool:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                                                                </cool:RowSelectionModel>
                                                            </SelectionModel>
                                                            <LoadMask ShowMask="true" Msg="Loading..." />
                                                            <BottomBar>
                                                                <cool:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" DisplayInfo="true"
                                                                    DisplayMsg="List Child {0} - {1} de {2}" EmptyMsg="<b>No Child</b>" />
                                                            </BottomBar>
                                                        </cool:GridPanel>
                                                    </Center>
                                                    <South>
                                                        <cool:FormPanel ID="frmpnChild" runat="server" Title="Add Child" BodyStyle="padding:5px;"
                                                            ButtonAlign="Right" Height="300" LabelWidth="150" MonitorPoll="500" MonitorValid="true">
                                                            <Body>
                                                                <cool:FormLayout ID="FormLayout1" runat="server">
                                                                    <cool:Anchor Horizontal="30%">
                                                                        <cool:DateField ID="dfdummy1" runat="server" FieldLabel="Date child" AllowBlank="false"
                                                                            ReadOnly="true">
                                                                        </cool:DateField>
                                                                    </cool:Anchor>
                                                                    <cool:Anchor Horizontal="30%">
                                                                        <cool:TextField ID="tfdummy2" runat="server" FieldLabel="dummy2" AllowBlank="true"
                                                                            EnableKeyEvents="true" MaskRe="^\d+$" MaxLength="11" MinLength="11">
                                                                            <Listeners>
                                                                                <Render Handler="this.el.dom.setAttribute('onPaste', 'return false');" />
                                                                            </Listeners>
                                                                        </cool:TextField>
                                                                    </cool:Anchor>
                                                                    <cool:Anchor Horizontal="40%">
                                                                        <cool:TextField ID="tfdummy3" runat="server" FieldLabel="dummy3" AllowBlank="false"
                                                                            InvalidText="no dummy" MaskRe="[ ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZabcçdefghijklmnñopqrstuvwxyzàáÀÁéèÈÉíìÍÌïÏóòÓÒúùÚÙüÜ]"
                                                                            EmptyText="add dummy3" />
                                                                    </cool:Anchor>
                                                                    <cool:Anchor Horizontal="40%">
                                                                        <cool:TextField ID="tfdummy4" runat="server" FieldLabel="dummy4" AllowBlank="false"
                                                                            InvalidText="no dummy" MaskRe="[ ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZabcçdefghijklmnñopqrstuvwxyzàáÀÁéèÈÉíìÍÌïÏóòÓÒúùÚÙüÜ]"
                                                                            EmptyText="add dummy" />
                                                                    </cool:Anchor>
                                                                    <cool:Anchor Horizontal="40%">
                                                                        <cool:TextField ID="tfdummy5" runat="server" FieldLabel="dummy5" AllowBlank="true"
                                                                            MaskRe="[ ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZabcçdefghijklmnñopqrstuvwxyzàáÀÁéèÈÉíìÍÌïÏóòÓÒúùÚÙüÜ]"
                                                                            EmptyText="add dummy5" />
                                                                    </cool:Anchor>
                                                                    <cool:Anchor Horizontal="35%">
                                                                        <cool:ComboBox ID="cbdummy6" runat="server" Editable="false" Mode="Local" ForceSelection="true"
                                                                            SelectOnFocus="true" FieldLabel="dummy6" AllowBlank="false" EmptyText="select dymmy6">
                                                                            <Items>
                                                                                <cool:ListItem Text="dummySon1" Value="0" />
                                                                                <cool:ListItem Text="dummySon2" Value="1" />
                                                                            </Items>
                                                                        </cool:ComboBox>
                                                                    </cool:Anchor>
                                                                </cool:FormLayout>
                                                            </Body>
                                                            <Buttons>
                                                                <cool:Button ID="btnSave" runat="server" Text="Guardar">
                                                                </cool:Button>
                                                                <cool:Button ID="btnClear" runat="server" Text="Limpiar">
                                                                </cool:Button>
                                                            </Buttons>
                                                        </cool:FormPanel>
                                                    </South>
                                                </cool:BorderLayout>
                                            </Body>
                                        </cool:Panel>
                                    </cool:FitLayout>
                                </Body>
                            </cool:Panel>
                        </cool:FitLayout>
                    </Body>
                </cool:Panel>
            </Body>
        </cool:ViewPort>
        </form>
    </body>
    </html>
    Thanks in advance.

Similar Threads

  1. Replies: 5
    Last Post: Jun 19, 2012, 9:06 PM
  2. TabPanel layout problem
    By m_bo in forum 1.x Help
    Replies: 0
    Last Post: Mar 19, 2012, 9:10 AM
  3. [CLOSED] TabPanel Layout
    By cmack in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 09, 2011, 3:06 PM
  4. [CLOSED] Tabpanel fit layout issue
    By edigital in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 30, 2010, 3:35 PM
  5. [1.0] Tabpanel + iframe + layout
    By SouthDeveloper in forum 1.x Help
    Replies: 0
    Last Post: May 13, 2010, 9:32 PM

Posting Permissions