PDA

View Full Version : [CLOSED] Column Layout killed by a Checkbox



Peter.Treier
Dec 09, 2014, 3:12 PM
Hi all

I'd like to have a Column-Layout on a Page.
Now I found a Problem with this Layout - adding a ComboBox to one of the Columns (See Code Line 110) destroys the Layout...

See here my Code


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />


<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Layout="FitLayout" Height="250" Border="true" Html="North Panel">
<Items>
</Items>
</ext:Panel>

<%--Preview--%>
<ext:Panel runat="server" ID="pnlPreview" Region="East" Title="Picture" Layout="Fit" Width="300" Border="false" Split="True" Collapsible="True">
<Loader runat="server" Mode="Frame">
<LoadMask ShowMask="true" />
</Loader>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>

<ext:Button runat="server" ID="cmdAddImage" Icon="add" Enabled="false" Flat="true" Width="30" Height="30" />

</Items>
</ext:Toolbar>
</TopBar>

</ext:Panel>

<%--Controls--%>
<ext:FormPanel runat="server" Region="Center" Layout="Fit" Header="false" TrackResetOnLoad="true" PaddingSpec="0 0 0 10" StyleSpec="background-color: #FFFFFF;" Width="450">
<TopBar>
<ext:Toolbar ID="mnuPerfume" runat="server" MarginSpec="5 0 0 -8">
<Items>

<ext:Button ID="cmdNew" runat="server" Text="New" Icon="Add" />

<ext:ToolbarFill />

<ext:Button ID="cmdSearch" runat="server" Text="Search" Icon="Zoom" />

<ext:Button ID="cmdReset" runat="server" Text="Reset" Icon="Cancel" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:FormPanel runat="server" ID="pnlDetail" Layout="card" ActiveIndex="0" Border="true" MarginSpec="0 10 0 0">
<%--Field Defaults--%>
<FieldDefaults LabelSeparator="" />


<TopBar>
<ext:Toolbar runat="server" StyleSpec="padding-bottom:0px;">
<Items>
<ext:TabStrip runat="server" ActionContainerID="pnlDetail" Border="false" Plain="true">
<Items>
<ext:Tab Text="Tab 1" />
<ext:Tab Text="Tab 2" />
<ext:Tab Text="Tab 3" />
<ext:Tab Text="Tab 4" />
</Items>
</ext:TabStrip>
</Items>
</ext:Toolbar>
</TopBar>

<Items>

<%--Tab 1--%>
<ext:Panel runat="server" Header="false" Layout="Column">
<Items>
<ext:Container runat="server" Layout="Column">
<Items>
<%--Col Left--%>
<ext:Container runat="server" Layout="FormLayout" ColumnWidth=".75">
<Items>
<ext:TextField runat="server" Text="Tab 1 Left" Width="200" />

</Items>
</ext:Container>
<%--Col Right--%>
<ext:Container runat="server" Layout="FormLayout" ColumnWidth=".25">
<Items>
<ext:TextField runat="server" Text="Tab 1 Right" Width="200" />
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Panel>

<%--Tab 2--%>
<ext:Panel runat="server" Header="false" Layout="Column">
<Items>
<ext:Container runat="server" Layout="Column">
<Items>

<%--Col Left--%>
<ext:Container runat="server" Layout="FormLayout" ColumnWidth=".75">
<Items>
<ext:TextField runat="server" Text="Tab 2 Left" Width="200" />

<%--THIS COMBOBOX CAUSES THE PROBLE--%>
<ext:Checkbox runat="server" FieldLabel="A CheckBox kills it" LabelAlign="Top" PaddingSpec="0 0 0 10" />

</Items>
</ext:Container>

<%--Col Right--%>
<ext:Container runat="server" Layout="FormLayout" ColumnWidth=".25">
<Items>
<ext:TextField runat="server" Text="Tab 2 Right" Width="200" />
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Panel>

<%--Tab 3--%>
<ext:Panel runat="server" Header="false" Layout="Fit">
<Items>
<ext:TextField runat="server" Text="Tab 3" />
</Items>
</ext:Panel>

<%--Tab 4--%>
<ext:Panel runat="server" Header="false" Layout="Fit">
<Items>
<ext:TextField runat="server" Text="Tab 3" />
</Items>
</ext:Panel>
</Items>

</ext:FormPanel>


</Items>

<BottomBar>

<ext:StatusBar ID="stbMain" runat="server" Hidden="false" BaseCls="dirtyMessage" Height="30">
<Items>
<ext:Label runat="server" ID="lblDirty" Text="Dirty" Hidden="true" />
</Items>
</ext:StatusBar>

</BottomBar>

<Listeners>
<DirtyChange Handler="formDirty(this, dirty);" />
</Listeners>

<Buttons>

<ext:Button ID="cmdDelete" runat="server" Text="Delete" Icon="Delete" Flat="true" />

<ext:Button ID="cmdSave" runat="server" Text="Save" Icon="Disk" Hidden="true" Flat="true" />
</Buttons>

</ext:FormPanel>

</Items>
</ext:Viewport>
</form>
</body>
</html>



This is the Result I expect
http://forums.ext.net/attachment.php?attachmentid=17011&stc=1

This is the Result with the ComboBox enabled !?
http://forums.ext.net/attachment.php?attachmentid=17021&stc=1

Any Ideas about that ?

Peter

Daniil
Dec 10, 2014, 11:11 AM
Hi Peter,

Please set some Width for the Checkbox as well. For example,

Width="200"

Peter.Treier
Dec 11, 2014, 3:13 PM
Jep, that's it !

Thank's Daniil