PDA

View Full Version : [0.8] Master with Tabpanel Layout



w0rtez
Apr 04, 2011, 10:18 PM
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>

geoffrey.mcgill
Apr 05, 2011, 2:58 PM
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>

w0rtez
Apr 05, 2011, 4:28 PM
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.

geoffrey.mcgill
Apr 05, 2011, 5:22 PM
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.

w0rtez
Apr 05, 2011, 6:54 PM
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="[ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst uvwxyz]"
EmptyText="add dummy3" />
</cool:Anchor>
<cool:Anchor Horizontal="40%">
<cool:TextField ID="tfdummy4" runat="server" FieldLabel="dummy4" AllowBlank="false"
InvalidText="no dummy" MaskRe="[ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst uvwxyz]"
EmptyText="add dummy" />
</cool:Anchor>
<cool:Anchor Horizontal="40%">
<cool:TextField ID="tfdummy5" runat="server" FieldLabel="dummy5" AllowBlank="true"
MaskRe="[ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst uvwxyz]"
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.