What's New?

[CLOSED] active item bug with multiple gridpanels

  1. #1
    Dec 02, 2009, 1:49 PM

    [CLOSED] active item bug with multiple gridpanels

    Hi,

    I am playing around with the card layout example and i think i have found a bug.

    My example has 3 panels. Within each panel is a gridpanel. The first gridpanel looks ok, but when i then switch the activeitem to one of the other panels, the gridpanels dont look quite right eg only the rows with data have a white background color .

                    <ext:Panel ID="_wizardPanel" runat="server" BodyStyle="border:0px;" ActiveIndex="0">       
                    <Body>
                        <ext:CardLayout ID="_wizardLayout" runat="server" DeferredRender="false">
                            <ext:Panel runat="server" Border="false" Header="false" ID="_panel1">
                                <Body>
                                    <ext:Panel ID="_pnl001" runat="server" Frame="true">
                                        <TopBar>
                                            <ext:Toolbar ID="_toolbar1" runat="server">
                                                <Items>
                                                    <ext:Label id="_label1" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                                    <ext:ToolbarFill ID="_toolbarFill1" runat="server" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Body>
                                            <ext:FitLayout ID="_fitLayout1" runat="server">
                                                <!-- Gridpanel goes here -->
                                            </ext:FitLayout>
                                        </Body>
                                    </ext:Panel>
                                </Body>
                            </ext:Panel>
                            <ext:Panel runat="server" Border="false" Header="false" ID="_panel2">
                                <Body>  
                                    <ext:Panel ID="_pnl002" runat="server" Frame="true">
                                        <TopBar>
                                            <ext:Toolbar ID="_toolbar2" runat="server">
                                                <Items>
                                                    <ext:Label id="_label2" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                                    <ext:ToolbarFill ID="_toolbarFill2" runat="server" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Body>
                                            <ext:FitLayout ID="_fitLayout2" runat="server">
                                                <!-- Gridpanel 2 goes here -->
                                            </ext:FitLayout>
                                        </Body>
                                    </ext:Panel>
                                </Body>
                            </ext:Panel>
                            <ext:Panel runat="server" Border="false" Header="false" ID="_panel3">
                                <Body>
                                    <ext:Panel ID="_pnl003" runat="server" Frame="true">
                                        <TopBar>
                                            <ext:Toolbar ID="_toolbar3" runat="server">
                                                <Items>
                                                    <ext:Label id="_label3" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                                    <ext:ToolbarFill ID="_toolbarFill3" runat="server" />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Body>
                                            <ext:FitLayout ID="_fitLayout3" runat="server">
                                                <!-- Gridpanel 3 goes here -->
                                            </ext:FitLayout>
                                        </Body>
                                    </ext:Panel>
                        
                                </Body>
                            </ext:Panel>
                        </ext:CardLayout> 
                    </Body>             
                </ext:Panel>
    Any help in resolving this would be greatly appreciated

    Lee
  2. #2
    Dec 02, 2009, 3:33 PM

    RE: [CLOSED] active item bug with multiple gridpanels

    Hi,

    I think you have to wrap the panels (panels with toolbar and grid) by FitLayout

    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] {"3m Co"},
                new object[] {"Alcoa Inc"},
                new object[] {"Altria Group Inc"},
                new object[] {"American Express Company"},
                new object[] {"American International Group, Inc."},
                new object[] {"AT&amp;T Inc."},
                new object[] {"Boeing Co."},
                new object[] {"Caterpillar Inc."},
                new object[] {"Citigroup, Inc."},
                new object[] {"E.I. du Pont de Nemours and Company"},
                new object[] {"Exxon Mobil Corp"},
                new object[] {"General Electric Company"},
                new object[] {"General Motors Corporation"},
                new object[] {"Hewlett-Packard Co."},
                new object[] {"Honeywell Intl Inc"},
                new object[] {"Intel Corporation"},
                new object[] {"International Business Machines"},
                new object[] {"Johnson &amp; Johnson"},
                new object[] {"JP Morgan &amp; Chase &amp; Co"},
                new object[] {"McDonald\"s Corporation"},
                new object[] {"Merck &amp; Co., Inc."},
                new object[] {"Microsoft Corporation"},
                new object[] {"Pfizer Inc"},
                new object[] {"The Coca-Cola Company"},
                new object[] {"The Home Depot, Inc."},
                new object[] {"The Procter &amp; Gamble Company"},
                new object[] {"United Technologies Corporation"},
                new object[] {"Verizon Communications"},
                new object[] {"Wal-Mart Stores, Inc."}
            };

            this.Store1.DataBind();
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
   
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="company" />
                    <ext:RecordField Name="price" Type="Float" />
                    <ext:RecordField Name="change" Type="Float" />
                    <ext:RecordField Name="pctChange" Type="Float" />
                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Panel ID="_wizardPanel" runat="server" BodyStyle="border:0px;" ActiveIndex="0"
        Height="600">
        <Body>
            <ext:CardLayout ID="_wizardLayout" runat="server" DeferredRender="false">
                <ext:Panel runat="server" Border="false" Header="false" ID="_panel1">
                    <Body>
                        <ext:FitLayout runat="server">
                            <ext:Panel ID="_pnl001" runat="server" Frame="true">
                                <TopBar>
                                    <ext:Toolbar ID="_toolbar1" runat="server">
                                        <Items>
                                            <ext:Label ID="_label1" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                            <ext:ToolbarFill ID="_toolbarFill1" runat="server" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout ID="_fitLayout1" runat="server">
                                        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Card #1" AutoExpandColumn="Company">
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                                                </Columns>
                                            </ColumnModel>
                                        </ext:GridPanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </ext:FitLayout>
                    </Body>
                </ext:Panel>
                <ext:Panel runat="server" Border="false" Header="false" ID="_panel2">
                    <Body>
                        <ext:FitLayout ID="FitLayout1" runat="server">
                            <ext:Panel ID="_pnl002" runat="server" Frame="true">
                                <TopBar>
                                    <ext:Toolbar ID="_toolbar2" runat="server">
                                        <Items>
                                            <ext:Label ID="_label2" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                            <ext:ToolbarFill ID="_toolbarFill2" runat="server" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout ID="_fitLayout2" runat="server">
                                        <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" Title="Card #2" AutoExpandColumn="Company">
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                                                </Columns>
                                            </ColumnModel>
                                        </ext:GridPanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </ext:FitLayout>
                    </Body>
                </ext:Panel>
                <ext:Panel runat="server" Border="false" Header="false" ID="_panel3">
                    <Body>
                        <ext:FitLayout ID="FitLayout2" runat="server">
                            <ext:Panel ID="_pnl003" runat="server" Frame="true">
                                <TopBar>
                                    <ext:Toolbar ID="_toolbar3" runat="server">
                                        <Items>
                                            <ext:Label ID="_label3" runat="server" Text="&amp;nbsp;" Cls="gridpanel-topbar" />
                                            <ext:ToolbarFill ID="_toolbarFill3" runat="server" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout ID="_fitLayout3" runat="server">
                                        <ext:GridPanel ID="GridPanel3" runat="server" StoreID="Store1" Title="Card #3" AutoExpandColumn="Company">
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                                                </Columns>
                                            </ColumnModel>
                                        </ext:GridPanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </ext:FitLayout>
                    </Body>
                </ext:Panel>
            </ext:CardLayout>
        </Body>
    </ext:Panel>
    
    <ext:Button runat="server" Text="Next">
        <Listeners>
            <Click Handler="_wizardPanel.activeIndex = _wizardPanel.activeIndex || 0;_wizardPanel.layout.setActiveItem(++_wizardPanel.activeIndex);" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>
  3. #3
    Dec 06, 2009, 2:51 PM

    RE: [CLOSED] active item bug with multiple gridpanels

    Thanks Vladimir, worked ;-)

Similar Threads

  1. [CLOSED] How to make an active tab select its corresponding menu item?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 02, 2012, 6:56 PM
  2. [CLOSED] Multiple Editors - Multiple Instances?
    By jwf in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 09, 2011, 6:45 PM
  3. [CLOSED] CycleButton active item
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 01, 2011, 1:20 PM
  4. [1.0] How to get active item index of Accordion Layout in code-behind?
    By thedarklord in forum 1.x Help
    Replies: 2
    Last Post: Apr 25, 2010, 3:15 AM
  5. Using a context menu for multiple GridPanels
    By Vimal Raj in forum 1.x Help
    Replies: 0
    Last Post: Mar 23, 2009, 8:43 AM

Posting Permissions