Problem with panels in TabStrip

  1. #1

    Problem with panels in TabStrip

    Hi,
    I'm quite new in Ext.NET.
    I 've got a problem with panels in TabStrip. Problem is that items overlap in CompositeField3.
    When I change panels order then pnlItems is OK (when I set its height) but Id field overlap on pnlSummary.
    Here is the code

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="cs-CZ" ViewStateMode="Disabled"
            AjaxViewStateMode="Disabled" EnableViewState="false" />
        <ext:Window ID="mainWindow" runat="server" Title="Interní kalkulace" Icon="Calculator"
            Maximized="true" Maximizable="false" Closable="false" Plain="true" Border="false"
            BodyBorder="false" Resizable="false" AutoScroll="true" Modal="true">
            <Tools>
                <ext:Tool Type="Search" Qtip="Přejít na seznam" />
            </Tools>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:TabStrip runat="server" ID="tabs">
                            <Items>
                                <ext:TabStripItem ActionItemID="pnlSummary" Title="Souhrn" Icon="BookOpen" />
                                <ext:TabStripItem ActionItemID="pnlItems" Title="Polo?ky" Icon="TextListBullets" />
                            </Items>
                        </ext:TabStrip>
                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                        <ext:FileUploadField runat="server" ButtonOnly="true" ID="ImportFile" ButtonText="Import z Planneru"
                            Icon="PageWhiteGet">
                        </ext:FileUploadField>
                        <ext:Button ID="PlannerButton" runat="server" Icon="ApplicationForm" Text="Export do planneru">
                        </ext:Button>
                        <ext:Button runat="server" Text="Vytvoř etapy" Icon="PageWhiteC" ID="CreateEtapsButton">
                            <Menu>
                                <ext:Menu ID="Menu1" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Samostatné  etapy">
                                        </ext:MenuItem>
                                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Jedna etapa s úkoly">
                                        </ext:MenuItem>
                                        <ext:MenuItem ID="MenuItem3" runat="server" Text="Vyber">
                                        </ext:MenuItem>
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                        <ext:Button runat="server" Icon="PageWhiteAdd" Text="Vytvoř nabídku" ID="CreateOfferButton" />
                        <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                        <ext:Button runat="server" Icon="Delete" Text="Smazat" ID="DeleteButton" />
                        <ext:Button ID="Button1" runat="server" Icon="Disk" Text="Ulo?it">
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Icon="Heart" Visible="false" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:FormPanel ID="pnlSummary" runat="server" Header="false" Frame="true" Layout="FormLayout">
                    <Items>
                        <ext:TableLayout ID="TableLayout2" runat="server" Columns="2">
                            <Cells>
                                <ext:Cell RowSpan="2">
                                    <ext:FieldSet ID="FieldSet1" runat="server" Title="Základní nastavení">
                                        <Defaults>
                                            <ext:Parameter Name="width" Value="400" Mode="Value" />
                                        </Defaults>
                                        <Items>
                                            <ext:NumberField ID="Id" FieldLabel="Číslo kalkulace" runat="server" Hidden="false"
                                                Enabled="false" Disabled="true" Width="150" AllowDecimals="false" IndicatorIcon="Information"
                                                Anchor="-20" IndicatorTip="Číslo je přiřazeno automaticky" />
                                            <ext:TextField ID="Name" FieldLabel="Jméno" runat="server" />                                        
                                            <ext:HyperLink ID="ProjectLink" FieldLabel="Projekt" runat="server" Text="..." />
                                            <ext:HyperLink ID="NabidkaLink" FieldLabel="Nabídka" runat="server" Text="..." />
                                            <ext:TextArea ID="Description" runat="server" FieldLabel="Popis" />
                                        </Items>
                                    </ext:FieldSet>
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:FieldSet ID="FieldSet2" runat="server" Title="Plán" Width="250" Icon="Hourglass">
                                        <Defaults>
                                            <ext:Parameter Name="width" Value="190" Mode="Value" />
                                        </Defaults>
                                        <Items>
                                            <ext:DateField runat="server" ID="PlanStartDate" Width="190" FieldLabel="Začátek" />
                                            <ext:DateField runat="server" ID="PlanEndDate" Width="190" ReadOnly="true" FieldLabel="Dokončení" />
                                            <ext:NumberField runat="server" ID="PlanHours" ReadOnly="true" FieldLabel="Počet hodin" />
                                        </Items>
                                    </ext:FieldSet>
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:FieldSet ID="FieldSet3" runat="server" Title="Datumy" Width="250" Icon="Date">
                                        <Defaults>
                                            <ext:Parameter Name="width" Value="190" Mode="Value" />
                                        </Defaults>
                                        <Items>
                                            <ext:DateField runat="server" ID="StartDate" Width="190" />
                                            <ext:DateField runat="server" ID="EndDate" Width="190" />
                                        </Items>
                                    </ext:FieldSet>
                                </ext:Cell>
                            </Cells>
                        </ext:TableLayout>
                    </Items>
                </ext:FormPanel>
                <ext:FormPanel ID="pnlItems" runat="server" Header="false" Frame="true" Layout="FormLayout">
                    <Items>
                        <ext:GridPanel runat="server" Title="Polo?ky" ID="ItemsGrid" AutoHeight="true" ViewStateMode="Disabled">
                            <Store>
                                <ext:Store runat="server" ViewStateMode="Disabled">
                                    <Reader>
                                        <ext:JsonReader IDProperty="Id" />
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <SelectionModel>
                                <ext:RowSelectionModel runat="server" SingleSelect="true">
                                </ext:RowSelectionModel>
                            </SelectionModel>
                            <View>
                                <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                                </ext:GridView>
                            </View>
                            <BottomBar>
                                <ext:StatusBar ID="StatusBar1" runat="server" StatusAlign="Left" />
                            </BottomBar>
                        </ext:GridPanel>
                        <ext:FormPanel runat="server" ID="pnlItem" TrackResetOnLoad="true">
                            <Items>
                                <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
                                    <Columns>
                                        <ext:LayoutColumn>
                                            <ext:FormPanel runat="server" AutoScroll="true" Width="400" ID="FormPanel1">
                                                <Items>
                                                    <ext:FieldSet runat="server" Title="Polo?ka" ID="fldItem" Collapsible="false" Layout="FormLayout">
                                                        <Items>
                                                            <ext:NumberField ID="Item_Id" runat="server" DataIndex="Id" MaxLengthText="4" Hidden="true" />
                                                            <ext:NumberField ID="Item_Position" runat="server" DataIndex="Position" Width="160"
                                                                MinValue="1" MaxValue="999" AllowBlank="true" AllowDecimals="false" />
                                                            <ext:TextField ID="Item_Name" runat="server" DataIndex="Name" Width="360" />
                                                            <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Začátek, konec">
                                                                <Items>
                                                                    <ext:DateField ID="Item_StartDate" runat="server" DataIndex="StartDate" />
                                                                    <ext:DateField ID="Item_EndDate" runat="server" DataIndex="EndDate" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="Termín" Hidden="true">
                                                                <Items>
                                                                    <ext:DateField ID="Item_TerminDate" runat="server" DataIndex="TerminDate" EmptyText="datum" />
                                                                    <ext:NumberField ID="Item_TerminHours" runat="server" DataIndex="TerminHours" EmptyText="hodiny"
                                                                        Width="50" MaxValue="999" />
                                                                </Items>
                                                            </ext:CompositeField>
                                                            <ext:TextField ID="Item_Resources" runat="server" DataIndex="Resources" Width="360" />
                                                            <ext:NumberField ID="Item_Hours" runat="server" DataIndex="Total" MaxLengthText="9"
                                                                AllowDecimals="true" AllowBlank="false" FieldLabel="Hodin" ReadOnly="true" Note="read only"
                                                                Width="160" />
                                                            <ext:NumberField ID="Item_Price" runat="server" DataIndex="Price" MaxLengthText="9"
                                                                AllowDecimals="true" AllowBlank="false" Note="read only" />
                                                            <ext:ComboBox ID="Item_ParentTask_Id" runat="server" DataIndex="ParentTask_Id" FieldLabel="Nadř. úkol">
                                                                <Triggers>
                                                                    <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                                                </Triggers>
                                                                <Listeners>
                                                                    <Select Handler="this.triggers[0].show();" />
                                                                    <BeforeQuery Handler="this.triggers[0][this.getRawValue().toString().length==0 ? 'hide' : 'show']();" />
                                                                </Listeners>
                                                            </ext:ComboBox>
                                                            <ext:TextArea ID="CinnostiGridData" runat="server" Hidden="true" />
                                                        </Items>
                                                        <Buttons>
                                                            <ext:Button ID="Button3" runat="server" Text="Get values" Visible="false">
                                                                <Listeners>
                                                                    <Click Handler="alert(#{pnlItem}.getForm().getValues(false));" />
                                                                </Listeners>
                                                            </ext:Button>
                                                            <ext:Button ID="Button4" runat="server" Text="Refresh" Visible="false">
                                                                <Listeners>
                                                                    <Click Handler="#{ItemsGrid}.getStore().reload();" />
                                                                </Listeners>
                                                            </ext:Button>
                                                            <ext:Button ID="btnAddItem" Icon="Add" Text="Nová polo?ka" runat="server" Disabled="true">
                                                            </ext:Button>
                                                            <ext:Button ID="Button5" Icon="Disk" Text="Ulo?it" runat="server">
                                                            </ext:Button>
                                                            <ext:Button ID="Button6" Icon="Delete" Text="Smazat" runat="server">
                                                            </ext:Button>
                                                        </Buttons>
                                                    </ext:FieldSet>
                                                </Items>
                                            </ext:FormPanel>
                                        </ext:LayoutColumn>
                                        <ext:LayoutColumn>
                                            <ext:FieldSet ID="FieldSet4" runat="server" Title="Činnosti" Frame="false" Width="220"
                                                Layout="FormLayout">
                                                <Items>
                                                    <ext:GridPanel runat="server" ID="CinnostiGrid" Height="200" Title="Seznam">
                                                        <ColumnModel>
                                                            <Columns>
                                                                <ext:Column Header="Činnost" Sortable="true" DataIndex="CategoryName" Width="120" />
                                                                <ext:Column Header="Group" Sortable="true" DataIndex="GroupName" Width="90" />
                                                                <ext:Column Header="Popis" Sortable="true" DataIndex="Desc" Width="50" Hidden="true" />
                                                                <ext:NumberColumn Header="Sazba" Sortable="true" DataIndex="rate" Width="50" Align="Right" />
                                                                <ext:NumberColumn Header="Hodin" Sortable="true" DataIndex="hours" Width="46" Align="Right" />
                                                                <ext:TemplateColumn Header="Cena" DataIndex="" Align="Right" Width="50">
                                                                    <Template ID="Template1" runat="server">
                                                                        <Html>
                                                                            <tpl for=".">{[values.rate * values.hours]}</tpl>
                                                                        </Html>
                                                                    </Template>
                                                                </ext:TemplateColumn>
                                                            </Columns>
                                                        </ColumnModel>
                                                        <Store>
                                                            <ext:Store runat="server">
                                                                <Reader>
                                                                    <ext:JsonReader>
                                                                        <Fields>
                                                                            <ext:RecordField Name="CategoryName" Type="String" />
                                                                            <ext:RecordField Name="GroupName" Type="String" />
                                                                            <ext:RecordField Name="Desc" Type="String" />
                                                                            <ext:RecordField Name="hours" Type="Float" />
                                                                            <ext:RecordField Name="rate" Type="Float" />
                                                                        </Fields>
                                                                    </ext:JsonReader>
                                                                </Reader>
                                                            </ext:Store>
                                                        </Store>
                                                        <SelectionModel>
                                                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true">
                                                            </ext:RowSelectionModel>
                                                        </SelectionModel>
                                                        <BottomBar>
                                                            <ext:StatusBar ID="StatusBar2" Text="Celkem ... hodin" runat="server">
                                                                <Items>
                                                                    <ext:Checkbox ID="ShowItems" runat="server" BoxLabel="Zobrazit i seznam">
                                                                    </ext:Checkbox>
                                                                    <ext:Button ID="Button7" Icon="Calculator" runat="server" Hidden="true">
                                                                    </ext:Button>
                                                                    <ext:Button ID="Button8" Icon="Rainbow" runat="server" Hidden="true" />
                                                                </Items>
                                                            </ext:StatusBar>
                                                        </BottomBar>
                                                    </ext:GridPanel>
                                                    <ext:FormPanel runat="server" Header="false" ID="pnlCinnost" LabelWidth="45">
                                                        <Items>
                                                            <ext:ComboBox ID="CategoryName" runat="server" FieldLabel="Činnost" Width="319" DataIndex="CategoryName">
                                                            </ext:ComboBox>
                                                            <ext:CompositeField ID="CompositeField3" runat="server" FieldLabel="Sazba" AnchorHorizontal="100%">
                                                                <Items>
                                                                    <ext:SpinnerField ID="CategoryRate" runat="server" MinValue="0" MaxValue="100000"
                                                                        AllowDecimals="true" DecimalPrecision="1" IncrementValue="100" Accelerate="true"
                                                                        AlternateIncrementValue="500" Width="60" DataIndex="rate" StyleSpec="padding-right:10px;" />
                                                                    <ext:DisplayField runat="server" Text="Hodin:" />
                                                                    <ext:SpinnerField ID="CategoryHours" runat="server" MinValue="0" MaxValue="1000"
                                                                        AllowDecimals="true" DecimalPrecision="1" IncrementValue="8" Accelerate="true"
                                                                        AlternateIncrementValue="40" Width="60" DataIndex="hours">
                                                                        <Listeners>
                                                                            <Spin Handler="/* Hack, if handler exist change is automatically updated - todo (works with line comment, but breaks other things */" />
                                                                        </Listeners>
                                                                    </ext:SpinnerField>
                                                                    <ext:DisplayField ID="DisplayField2" runat="server" Text="Rezerva:" />
                                                                    <ext:SpinnerField ID="CategoryRazerva" runat="server" MinValue="0" MaxValue="999"
                                                                        AllowDecimals="true" DecimalPrecision="1" IncrementValue="8" Accelerate="true"
                                                                        AlternateIncrementValue="500" Width="60" DataIndex="rezerva" />
                                                                    <ext:DisplayField ID="DisplayField3" runat="server" Flex="1" Html="&nbsp;" />
                                                                    <ext:Button ID="Button9" runat="server" Text="ok">
                                                                    </ext:Button>
                                                                </Items>
                                                            </ext:CompositeField>
                                                        </Items>
                                                    </ext:FormPanel>
                                                </Items>
                                            </ext:FieldSet>
                                        </ext:LayoutColumn>
                                    </Columns>
                                </ext:ColumnLayout>
                            </Items>
                        </ext:FormPanel>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Can somebody help me please?
  2. #2
    Try to set HideMode="Offsets" for TabStrip
  3. #3
    Quote Originally Posted by Vladimir View Post
    Try to set HideMode="Offsets" for TabStrip
    No change.
  4. #4
    Here is the screenshot to ilustrate the problem.
    Click image for larger version. 

Name:	Items2.jpg 
Views:	206 
Size:	91.5 KB 
ID:	3472
    Red square is area with problem.
    Last edited by JosefTrbusek; Nov 21, 2011 at 11:35 AM.
  5. #5
    Hi,

    Please always simplify a sample as much as you can, like this:

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Window runat="server" Maximized="true">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:TabStrip runat="server">
                                <Items>
                                    <ext:TabStripItem ActionItemID="Panel1" Title="Panel1" />
                                    <ext:TabStripItem ActionItemID="Panel2" Title="Reproduce"  />
                                    <ext:TabStripItem ActionItemID="Panel3" Title="Fixed" HideMode="Offsets" />
                                </Items>
                            </ext:TabStrip>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="Panel1" runat="server" />
                    <ext:FormPanel ID="Panel2" runat="server" Layout="FormLayout">
                        <Items>
                            <ext:ComboBox runat="server" FieldLabel="Combo" Width="319" />
                            <ext:CompositeField
                                runat="server" 
                                FieldLabel="Comp" 
                                AnchorHorizontal="100%">
                                <Items>
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:DisplayField runat="server" Width="40" Text="Text:" />
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:DisplayField runat="server" Width="40" Text="Text:" />
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:BoxComponent runat="server" Flex="1" />
                                    <ext:Button runat="server" Width="20" Text="ok" />
                                </Items>
                            </ext:CompositeField>
                        </Items>
                    </ext:FormPanel>
                    <ext:FormPanel ID="Panel3" runat="server" Layout="FormLayout">
                        <Items>
                            <ext:ComboBox runat="server" FieldLabel="Combo" Width="319" />
                            <ext:CompositeField
                                runat="server" 
                                FieldLabel="Comp" 
                                AnchorHorizontal="100%">
                                <Items>
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:DisplayField runat="server" Width="40" Text="Text:" />
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:DisplayField runat="server" Width="40" Text="Text:" />
                                    <ext:SpinnerField runat="server" Width="60" />
                                    <ext:BoxComponent runat="server" Flex="1" />
                                    <ext:Button runat="server" Width="25" Text="ok" />
                                </Items>
                            </ext:CompositeField>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    To fix please set up HideMode="Offsets" for a TabStripItem.
  6. #6
    Thanks for help. Problem is solved.
    However, can you explain me this problem?
    I'm the quite novice and I'd like to understand this.
  7. #7
    Please see:
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-cfg-hideMode

    A default "display" option means that a component is hidden using CSS "display: none".

    In turn it means that there is no size, but layouting is done. With some layout managers and some its items layouting can be wrong without size.

    An "offsets" option means that a component is hidden setting up a negative offset position, it does nothing with size. Respectively, a layout manager has a good chance to do correct layouting.
  8. #8
    Thanks for explain.

Similar Threads

  1. [CLOSED] So many panels and nested panels
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 03, 2012, 5:23 AM
  2. [Razor] How to create a TabStrip
    By jxlarrea in forum 2.x Help
    Replies: 2
    Last Post: Apr 20, 2012, 8:38 PM
  3. REV 3544 withbroken TabStrip Panels
    By Pablo in forum 1.x Help
    Replies: 2
    Last Post: Apr 26, 2011, 1:25 PM
  4. Mult-tier TabStrip
    By peter.campbell in forum 1.x Help
    Replies: 0
    Last Post: Jan 24, 2011, 1:02 PM
  5. I can not find the tabstrip why?
    By Fabrizio in forum 1.x Help
    Replies: 3
    Last Post: Jun 15, 2010, 2:49 PM

Tags for this Thread

Posting Permissions