What's New?

[CLOSED] [1.0] GridPanel in a TabPanel

  1. #1
    Feb 10, 2010, 4:20 PM

    [CLOSED] [1.0] GridPanel in a TabPanel

    Hello,

    With the following example how can I make the gridpanel and the bottom bar render properly when you click Panel 2?

    Example.aspx:
    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Example</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder" runat="server" />
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager" runat="server" Theme="Gray" />
        <ext:Viewport runat="server" Layout="Border">
            <Items>
                <ext:Panel ID="Center" runat="server"
                    Region="Center">
                    <Content>
                        
                            <ext:TabPanel ID="TabPanel1" runat="server"
                                Padding="10"
                                Plain="true">
                                <Items>
                                    <ext:Panel ID="Panel1" runat="server"
                                        AutoHeight="true"
                                        Title="Panel 1">
                                        <Content>
                                            Panel 1
                                        </Content>
                                    </ext:Panel>
                                    <ext:Panel ID="Panel2" runat="server"
                                        AutoHeight="true"
                                        Title="Panel 2">
                                        <Content>
                                            <ext:GridPanel ID="GridPanel1" runat="server"
                                                AutoExpandColumn="Name"
                                                Height="150">
                                                <ColumnModel>
                                                    <Columns>
                                                        <ext:Column ColumnID="Name" DataIndex="Name" Header="Category" />
                                                    </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                    <ext:RowSelectionModel runat="server" />
                                                </SelectionModel>
                                                <BottomBar>
                                                    <ext:Toolbar runat="server">
                                                        <Items>
                                                            <ext:Button runat="server" Text="Button" />
                                                        </Items>
                                                    </ext:Toolbar>
                                                </BottomBar>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        

                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Replication steps:
    1. Load page
    2. Click Panel 2
    3. Notice that the panel does not render the bottom bar and the first column is squished?

    Also, I know it will automatically adjust when I bind a data source to a store on the grid panel, but the user must first select from a dropdown before loading the data ... so that isn't an option.

    Cheers,
    Timothy
  2. #2
    Feb 10, 2010, 9:54 PM

    RE: [CLOSED] [1.0] GridPanel in a TabPanel

    There are a couple issues we're investigating. I'm pasting the following code sample here just for my future reference. It's related to the problem above, but does not demonstrate a fix.

    Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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:GridPanel 
            runat="server"
            Title="Example"
            Height="150"
            Width="350"
            AutoExpandColumn="Name">
            <Listeners>
                <Render Handler="el.getView().refresh()" Delay="100" />
            </Listeners>
            <View>
                <ext:GridView runat="server" EmptyText="No Records..." />
            </View>
            <Store>
                <ext:Store runat="server" />
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ColumnID="Name" DataIndex="Name" Header="Category" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Button" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
    </form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Feb 11, 2010, 6:49 AM

    RE: [CLOSED] [1.0] GridPanel in a TabPanel

    Hi,

    1. Toolbar problem: you didn't define a Store for the GridPanel therefore javascript error occurs. Please add a Store


    2. Hidden area (display:none, like inactive tab) has no size (it is feature of HTML) therefore when GridPanel renders inside inactive tab then its width is 0

    Possible solutions:
    - if you still need Content then call syncSize for the GridPanel inside Activate listener of the Panel2
    <Activate Handler="#{GridPanel1}.syncSize();" Single="true" />

    or


    - place GridPanel inside Items collection instead Content. In this case the GridPanel will be rendered after tab activation only (when tab's body will be visible and has a size)
  4. #4
    Feb 11, 2010, 8:06 AM

    RE: [CLOSED] [1.0] GridPanel in a TabPanel

    Thanks vladimir, I'll use your suggestions.

    Cheers,
    Timothy
  5. #5
    Feb 12, 2010, 4:55 AM

    RE: [CLOSED] [1.0] GridPanel in a TabPanel

    Here's a revised sample demonstrating how to configure a Store as an inner property of the <ext:GridPanel>.

    I also replaced a few of the <Content> nodes with <Items>.

    Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Viewport runat="server" Layout="Border">
            <Items>
                <ext:Panel runat="server" Region="Center">
                    <Items>
                        <ext:TabPanel 
                            runat="server"
                            Padding="10"
                            Plain="true">
                            <Items>
                                <ext:Panel 
                                    runat="server"
                                    AutoHeight="true"
                                    Title="Panel 1">
                                    <Content>Panel 1</Content>
                                </ext:Panel>
                                <ext:Panel 
                                    runat="server"
                                    AutoHeight="true"
                                    Title="Panel 2">
                                    <Items>
                                        <ext:GridPanel 
                                            runat="server"
                                            AutoExpandColumn="Name"
                                            Height="150">
                                            <Store>
                                                <ext:Store runat="server" />
                                            </Store>
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ColumnID="Name" DataIndex="Name" Header="Category" />
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:RowSelectionModel runat="server" />
                                            </SelectionModel>
                                            <BottomBar>
                                                <ext:Toolbar runat="server">
                                                    <Items>
                                                        <ext:Button runat="server" Text="Button" />
                                                    </Items>
                                                </ext:Toolbar>
                                            </BottomBar>
                                        </ext:GridPanel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:TabPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Tabpanel and Gridpanel problem
    By Akpenob in forum 2.x Help
    Replies: 2
    Last Post: Aug 20, 2012, 9:30 AM
  2. TabPanel, FileUpload, GridPanel
    By w0rtez in forum 1.x Help
    Replies: 2
    Last Post: Sep 06, 2010, 10:03 PM
  3. [CLOSED] GridPanel as Tab in TabPanel - can it be closable?
    By roszman in forum 1.x Help
    Replies: 2
    Last Post: Apr 23, 2010, 9:02 AM
  4. Finding GridPanel in a TabPanel
    By madhugumma in forum 1.x Help
    Replies: 0
    Last Post: Jul 22, 2009, 9:59 AM
  5. [FIXED] [V0.6] TabPanel and GridPanel
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Sep 07, 2008, 12:42 PM

Posting Permissions