[CLOSED] Tab Strip Not Displaying Correctly

Page 2 of 2 FirstFirst 12
  1. #11
    Sorry, looks like I spoke too soon.

    If the inital tab that is displayed has a button, then everything works as it should. However, if the next tab has a button, then the icon in the button does not appear. Please see the corresponding code sample below and watch how, in Firefox, the go button on the Performance tab loses its icon.

    <%@ Page Language="vb" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub MarketValueGo_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MarketValueGo.Click
            Dim data As New List(Of Object)
            Dim x As Integer = 1
            While x < 100
                data.Add(New With {.Description_vc = "Howard the Duck Household", .MarketValue_fl = 321312.02, .Allocation_fl = 1321.24})
                x += 1
            End While
            Me.MarketValueStore.DataSource = data
            Me.MarketValueStore.DataBind()
        End Sub
        
        Protected Sub ShowHidePanel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ShowHidePanel.Click
            If ResultDetailsPanel.Hidden Then
                ResultDetailsPanel.Hidden = False
                ResultDetailsPanel.HideMode = HideMode.Offsets
                Viewport1.DoLayout()
                'TabStrip1.SyncSize()
                'MarketValueGo.Call("syncSize")
            Else
                ResultDetailsPanel.Hidden = True
                Viewport1.DoLayout()
            End If
        End Sub
    
    </script>
    
    <!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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Viewport ID="Viewport1" runat="server">
                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <North>
                            <ext:Panel ID="Panel1" runat="server" Border="false" Height="160">
                                <Items>
                                    <ext:Button ID="ShowHidePanel" runat="server" Icon="PlayBlue" Text="Show/Hide Panel">
                                        <DirectEvents>
                                            <Click OnEvent="ShowHidePanel_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </North>
                        <Center>
                            <ext:Panel ID="ResultsPanel" runat="server" Border="false" />
                        </Center>
                        <South>
                            <ext:Panel ID="ResultDetailsPanel" runat="server" Border="false" Height="300" Hidden="true"
                                HideMode="Offsets">
                                <Content>
                                    <ext:FitLayout ID="FitLayout1" runat="server">
                                        <Items>
                                            <ext:Panel ID="CardPanel" runat="server" Layout="card" ActiveIndex="0" Border="false">
                                                <TopBar>
                                                    <ext:Toolbar ID="Toolbar2" runat="server">
                                                        <Items>
                                                            <ext:TabStrip ID="TabStrip1" runat="server">
                                                                <Items>
                                                                    <ext:TabStripItem ActionItemID="MarketValuePanel" runat="server" Title="Market Value" />
                                                                    <ext:TabStripItem ActionItemID="PerformancePanel" runat="server" Title="Performance" />
                                                                    <ext:TabStripItem ActionItemID="QuickReportsPanel" runat="server" Title="Quick Reports" />
                                                                    <ext:TabStripItem ActionItemID="ReportingPanel" runat="server" Title="Reporting" />
                                                                </Items>
                                                            </ext:TabStrip>
                                                            <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                                            <ext:Label ID="Description" runat="server" Text="Will Smith Household" Cls="detailHeader" />
                                                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="5" />
                                                        </Items>
                                                    </ext:Toolbar>
                                                </TopBar>
                                                <Items>
                                                    <ext:Panel ID="MarketValuePanel" runat="server" Title="Market Value" Header="false"
                                                        Border="false" Layout="Fit">
                                                        <TopBar>
                                                            <ext:Toolbar ID="Toolbar4" runat="server">
                                                                <Items>
                                                                </Items>
                                                            </ext:Toolbar>
                                                        </TopBar>
                                                        <Content>
                                                            <ext:Panel ID="HoldingsPanel" runat="server" Border="false" Layout="Fit">
                                                                <TopBar>
                                                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                                                        <Items>
                                                                            <ext:Checkbox ID="NetOfFees" runat="server" FieldLabel="Net of Fees" LabelWidth="55" />
                                                                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                                            <ext:DateField ID="FromDate" runat="server" Vtype="daterange" FieldLabel="From" AnchorHorizontal="100%"
                                                                                LabelWidth="22" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
                                                                            <ext:DateField ID="ToDate" runat="server" Vtype="daterange" FieldLabel="To" AnchorHorizontal="100%"
                                                                                LabelWidth="22" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
                                                                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer4" runat="server" Width="10" />
                                                                            <ext:Button ID="BenchmarkMenu" runat="server" Text="Benchmark Options" Hidden="true"
                                                                                Icon="Report">
                                                                                <Menu>
                                                                                    <ext:Menu ID="Menu1" runat="server">
                                                                                        <Items>
                                                                                            <ext:CheckMenuItem ID="Blended" runat="server" Text="Blended" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="RebalancedBlend" runat="server" Text="Rebalanced Blend" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="Policy" runat="server" Text="Policy" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="Pure" runat="server" Text="Pure" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="None" runat="server" Text="None" Group="benchmark" Checked="true" />
                                                                                        </Items>
                                                                                    </ext:Menu>
                                                                                </Menu>
                                                                            </ext:Button>
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer5" runat="server" Width="10" />
                                                                            <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer6" runat="server" Width="10" />
                                                                            <ext:ComboBox ID="ViewBy" runat="server" AllowBlank="false" Editable="false">
                                                                                <Store>
                                                                                    <ext:Store ID="ViewByStore" runat="server">
                                                                                        <Reader>
                                                                                            <ext:JsonReader IDProperty="value">
                                                                                                <Fields>
                                                                                                    <ext:RecordField Name="text">
                                                                                                    </ext:RecordField>
                                                                                                    <ext:RecordField Name="value">
                                                                                                    </ext:RecordField>
                                                                                                </Fields>
                                                                                            </ext:JsonReader>
                                                                                        </Reader>
                                                                                    </ext:Store>
                                                                                </Store>
                                                                            </ext:ComboBox>
                                                                            <ext:Button ID="MarketValueGo" runat="server" Text="GO" Icon="PlayGreen">
                                                                                <DirectEvents>
                                                                                    <Click OnEvent="MarketValueGo_Click">
                                                                                        <EventMask ShowMask="true" />
                                                                                    </Click>
                                                                                </DirectEvents>
                                                                            </ext:Button>
                                                                        </Items>
                                                                    </ext:Toolbar>
                                                                </TopBar>
                                                                <Items>
                                                                    <ext:FitLayout ID="FitLayout2" runat="server">
                                                                        <Items>
                                                                            <ext:GridPanel ID="MarketValueGridPanel" runat="server" AutoExpandColumn="Description_vc"
                                                                                Border="false">
                                                                                <Store>
                                                                                    <ext:Store ID="MarketValueStore" runat="server">
                                                                                        <Reader>
                                                                                            <ext:JsonReader>
                                                                                                <Fields>
                                                                                                    <ext:RecordField Name="Description_vc" Type="String" />
                                                                                                    <ext:RecordField Name="MarketValue_fl" Type="Float" />
                                                                                                    <ext:RecordField Name="Allocation_fl" Type="Float" />
                                                                                                </Fields>
                                                                                            </ext:JsonReader>
                                                                                        </Reader>
                                                                                        <AutoLoadParams>
                                                                                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                                                                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                                                                                        </AutoLoadParams>
                                                                                    </ext:Store>
                                                                                </Store>
                                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                                    <Columns>
                                                                                        <ext:Column ColumnID="Description" Header="Description" DataIndex="Description_vc"
                                                                                            Width="300" />
                                                                                        <ext:Column ColumnID="MarketValue" Header="Market Value" DataIndex="MarketValue_fl" />
                                                                                        <ext:Column ColumnID="Allocation" Header="Allocation" DataIndex="Allocation_fl" />
                                                                                    </Columns>
                                                                                </ColumnModel>
                                                                                <BottomBar>
                                                                                    <ext:PagingToolbar ID="MarketValuePagingToolBar" runat="server" PageSize="20" HideRefresh="true" />
                                                                                </BottomBar>
                                                                                <LoadMask ShowMask="true" />
                                                                            </ext:GridPanel>
                                                                        </Items>
                                                                    </ext:FitLayout>
                                                                </Items>
                                                            </ext:Panel>
                                                        </Content>
                                                    </ext:Panel>
                                                    <ext:Panel ID="PerformancePanel" runat="server" Title="Market Value" Header="false"
                                                        Border="false" Layout="Fit">
                                                        <TopBar>
                                                            <ext:Toolbar ID="Toolbar3" runat="server">
                                                                <Items>
                                                                </Items>
                                                            </ext:Toolbar>
                                                        </TopBar>
                                                        <Content>
                                                            <ext:Panel ID="Panel3" runat="server" Border="false" Layout="Fit">
                                                                <TopBar>
                                                                    <ext:Toolbar ID="Toolbar5" runat="server">
                                                                        <Items>
                                                                            <ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Net of Fees" LabelWidth="55" />
                                                                            <ext:ToolbarFill ID="ToolbarFill3" runat="server" />
                                                                            <ext:DateField ID="DateField1" runat="server" Vtype="daterange" FieldLabel="From" AnchorHorizontal="100%"
                                                                                LabelWidth="22" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer7" runat="server" Width="10" />
                                                                            <ext:DateField ID="DateField2" runat="server" Vtype="daterange" FieldLabel="To" AnchorHorizontal="100%"
                                                                                LabelWidth="22" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer8" runat="server" Width="10" />
                                                                            <ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer9" runat="server" Width="10" />
                                                                            <ext:Button ID="Button1" runat="server" Text="Benchmark Options" Hidden="true"
                                                                                Icon="Report">
                                                                                <Menu>
                                                                                    <ext:Menu ID="Menu2" runat="server">
                                                                                        <Items>
                                                                                            <ext:CheckMenuItem ID="CheckMenuItem1" runat="server" Text="Blended" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="CheckMenuItem2" runat="server" Text="Rebalanced Blend" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="CheckMenuItem3" runat="server" Text="Policy" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="CheckMenuItem4" runat="server" Text="Pure" Group="benchmark" />
                                                                                            <ext:CheckMenuItem ID="CheckMenuItem5" runat="server" Text="None" Group="benchmark" Checked="true" />
                                                                                        </Items>
                                                                                    </ext:Menu>
                                                                                </Menu>
                                                                            </ext:Button>
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer10" runat="server" Width="10" />
                                                                            <ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer11" runat="server" Width="10" />
                                                                            <ext:ComboBox ID="ComboBox1" runat="server" AllowBlank="false" Editable="false">
                                                                                <Store>
                                                                                    <ext:Store ID="Store1" runat="server">
                                                                                        <Reader>
                                                                                            <ext:JsonReader IDProperty="value">
                                                                                                <Fields>
                                                                                                    <ext:RecordField Name="text">
                                                                                                    </ext:RecordField>
                                                                                                    <ext:RecordField Name="value">
                                                                                                    </ext:RecordField>
                                                                                                </Fields>
                                                                                            </ext:JsonReader>
                                                                                        </Reader>
                                                                                    </ext:Store>
                                                                                </Store>
                                                                            </ext:ComboBox>
                                                                            <ext:Button ID="Button2" runat="server" Text="GO" Icon="PlayGreen">
                                                                                <DirectEvents>
                                                                                    <Click OnEvent="MarketValueGo_Click">
                                                                                        <EventMask ShowMask="true" />
                                                                                    </Click>
                                                                                </DirectEvents>
                                                                            </ext:Button>
                                                                        </Items>
                                                                    </ext:Toolbar>
                                                                </TopBar>
                                                                <Items>
                                                                    <ext:FitLayout ID="FitLayout3" runat="server">
                                                                        <Items>
                                                                            <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="Description_vc"
                                                                                Border="false">
                                                                                <Store>
                                                                                    <ext:Store ID="Store2" runat="server">
                                                                                        <Reader>
                                                                                            <ext:JsonReader>
                                                                                                <Fields>
                                                                                                    <ext:RecordField Name="Description_vc" Type="String" />
                                                                                                    <ext:RecordField Name="MarketValue_fl" Type="Float" />
                                                                                                    <ext:RecordField Name="Allocation_fl" Type="Float" />
                                                                                                </Fields>
                                                                                            </ext:JsonReader>
                                                                                        </Reader>
                                                                                        <AutoLoadParams>
                                                                                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                                                                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                                                                                        </AutoLoadParams>
                                                                                    </ext:Store>
                                                                                </Store>
                                                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                                                    <Columns>
                                                                                        <ext:Column ColumnID="Description" Header="Description" DataIndex="Description_vc"
                                                                                            Width="300" />
                                                                                        <ext:Column ColumnID="MarketValue" Header="Market Value" DataIndex="MarketValue_fl" />
                                                                                        <ext:Column ColumnID="Allocation" Header="Allocation" DataIndex="Allocation_fl" />
                                                                                    </Columns>
                                                                                </ColumnModel>
                                                                                <BottomBar>
                                                                                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="20" HideRefresh="true" />
                                                                                </BottomBar>
                                                                                <LoadMask ShowMask="true" />
                                                                            </ext:GridPanel>
                                                                        </Items>
                                                                    </ext:FitLayout>
                                                                </Items>
                                                            </ext:Panel>
                                                        </Content>
                                                    </ext:Panel>
                                                    <ext:Panel ID="QuickReportsPanel" runat="server" Title="Quick Reports" Border="false"
                                                        Header="false">
                                                        <TopBar>
                                                            <ext:Toolbar ID="Toolbar6" runat="server">
                                                                <Items>
                                                                </Items>
                                                            </ext:Toolbar>
                                                        </TopBar>
                                                        <Content>
                                                            Quick Reports Stuff
                                                        </Content>
                                                    </ext:Panel>
                                                    <ext:Panel ID="ReportingPanel" runat="server" Title="Reporting" Border="false" Header="false">
                                                        <TopBar>
                                                            <ext:Toolbar ID="Toolbar7" runat="server">
                                                                <Items>
                                                                </Items>
                                                            </ext:Toolbar>
                                                        </TopBar>
                                                        <Content>
                                                            Reporting Stuff
                                                        </Content>
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Panel>
                                        </Items>
                                    </ext:FitLayout>
                                </Content>
                            </ext:Panel>
                        </South>
                    </ext:BorderLayout>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
  2. #12
    Hi,

    It the same problem. You can add HideMode="Offsets" for each card panel (MarketValuePanel, PerformancePanel, QuickReportsPanel, ReportingPanel) or add the following code to the CardPanel
    <LayoutConfig>
        <ext:CardLayoutConfig LayoutOnCardChange="true" DeferredRender="true" />
    </LayoutConfig>
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] Help To Make the TabPanel or Tab Strip RTL
    By imaa in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 29, 2011, 8:29 AM
  2. [CLOSED] Scrolling Tab Strip is not shown
    By thchuong in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2011, 4:51 AM
  3. [CLOSED] Tab Strip throwing error while adding at toolbar
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 13, 2011, 5:23 PM
  4. [CLOSED] hidden tab panels not displaying correctly
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 29, 2010, 4:18 AM
  5. [CLOSED] GridView in GridPanel not displaying row contents correctly...
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 29, 2009, 1:54 PM

Tags for this Thread

Posting Permissions