Gridpanel within Tab appears outside of Tab

  1. #1

    Gridpanel within Tab appears outside of Tab



    I'm trying to get a GridPanel within a TabPanel Tab but it's not respecting my contstraints !

    Here's an example...

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
    <%@ Register Assembly="Coolite.Ext.UX" Namespace="Coolite.Ext.UX" TagPrefix="ux" %>
     
    <!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)
    
    
        {
            this.Store1.DataSource = this.Jobs;
            this.Store1.DataBind();
        }
    
    
        private List<GridPanelJob> Jobs
        {
            get
            {
                List<GridPanelJob> jobs = new List<GridPanelJob>();
     
                for (int i = 1; i <= 50; i++)
                {
                    jobs.Add(new GridPanelJob(
                                i, 
                                "Task" + i.ToString(), 
                                DateTime.Today.AddDays(i), 
                                DateTime.Today.AddDays(i + i), 
                                (i%3 == 0)));
                }
     
                return jobs;
            }
        }
    
    
        public class GridPanelJob
       {
            // private members
            int iID;
            string strName;
            DateTime dtStart;
            DateTime dtEnd;
            bool boolCompleted;
    
    
    
            // empty constructor
            public GridPanelJob()
            {
            }
    
    
    
            // full constructor
            public GridPanelJob(int ID, string Name, DateTime Start, DateTime End, bool Completed)
            {
                this.iID = ID;
                this.strName = Name;
                this.dtStart = Start;
                this.dtEnd = End;
                this.boolCompleted = Completed;
            }
    
    
            // public accessors
            public int ID
            {
                get { return iID; }
                set { iID = value; }
            }
            public string Name
            {
                get { return strName; }
                set { strName = value; }
            }
            public DateTime Start
            {
                get { return dtStart; }
                set { dtStart = value; }
            }
            public DateTime End
            {
                get { return dtEnd; }
                set { dtEnd = value; }
            }
            public bool Completed
            {
                get { return boolCompleted; }
                set { boolCompleted = value; }
            }
    
    
    
        }
    
    
    
    </script>
    
    
     
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    
    
    <head id="Head1" runat="server">
    
    
        <title>Coolite Toolkit - GridPanel with local Paging, Sorting and Filtering</title>
    
    
    </head>
    
    
    <body>
    
    
        <form id="form1" runat="server">
    
    
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
    
    
           <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader ReaderID="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Start" Type="Date" />
                            <ext:RecordField Name="End" Type="Date" />
                            <ext:RecordField Name="Completed" Type="Boolean" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
                    
    
    
                 <ext:TabPanel ID="CenterTabs" runat="server" Border="false" Title="Center">
    
    
                    <Tabs>
                    <ext:Tab ID="Tab1" runat="server" Title="Tab1"><Content>Tab1</Content></ext:Tab>
                    <ext:Tab ID="Tab2" runat="server" Title="Tab2" ActiveItem="Tab2" ><Content>Tab2</Content></ext:Tab>
                    <ext:Tab ID="Tab3" runat="server" Title="Tab3"><Content>Tab3</Content></ext:Tab>
                    <ext:Tab ID="Tab4" runat="server" Title="Tab4"><Content>
            <ext:Window 
                ID="Window1" 
                runat="server"
                Collapsible="true"
                Maximizable="true"
                Icon="Lorry" 
                Title="Job List"
                Width="600"
                Height="350">
                <Content>
                    <ext:FitLayout ID="FitLayout1" runat="server">
                        <ext:GridPanel
                            ID="GridPanel1" 
                            runat="server" 
                            StoreID="Store1"
                            StripeRows="true"
                            Header="false"
                            Border="false"
                            AutoExpandColumn="Name">
                            <LoadMask ShowMask="false" />
                            <SelModel>
                                <ext:RowSelectionModel 
                                    ID="RowSelectionModel1" 
                                    runat="server" 
                                    SingleSelect="true" 
                                    />
                            </SelModel>            
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column 
                                        Header="ID" 
                                        Width="40" 
                                        Sortable="true" 
                                        DataIndex="ID" 
                                        />
                                    <ext:Column 
                                        ColumnID="Name" 
                                        Header="Job Name" 
                                        Sortable="true" 
                                        DataIndex="Name" 
                                        />
                                    <ext:Column 
                                        ColumnID="Start" 
                                        Header="Start" 
                                        Width="120" 
                                        Sortable="true" 
                                        DataIndex="Start">
                                        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
                                    </ext:Column>
                                    <ext:Column 
                                        ColumnID="End" 
                                        Header="End" 
                                        Width="120" 
                                        Sortable="true" 
                                        DataIndex="End">
                                        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
                                    </ext:Column>
                                    <ext:Column 
                                        ColumnID="Completed" 
                                        Header="Completed" 
                                        Width="80" 
                                        Sortable="true" 
                                        DataIndex="Completed">
                                        <Renderer Handler="return (value) ? 'Yes':'No';" />
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
    
    
                            <Bbar>
                                <ext:PagingToolBar 
                                    ID="PagingToolBar1" 
                                    runat="server" 
                                    StoreID="Store1"
                                    PageSize="10" 
                                    DisplayInfo="true"
                                    DisplayMsg="Displaying Jobs {0} - {1} of {2}"
                                    />
                            </Bbar>
                        </ext:GridPanel>
                    </ext:FitLayout>
                </Content>
            </ext:Window>
            
            
    </Content>
    </ext:Tab>
    </Tabs>
                    </ext:TabPanel>
    
    
     
    
    
     
        </form>
    </body>
    
    
    </html>
  2. #2

    RE: Gridpanel within Tab appears outside of Tab

    Hi Steve,

    As I see you put the GridPanel to a window. If you remove the window then GridPanel should be inside Tab

  3. #3

    RE: Gridpanel within Tab appears outside of Tab



    Hi Vlad,

    If i remove the window it disappears completely !

  4. #4

    RE: Gridpanel within Tab appears outside of Tab

    How about inside an Ext:Panel instead of a Ext:Window?

    Cheers,
    Timothy
  5. #5

    RE: Gridpanel within Tab appears outside of Tab

    You da man Timothy, thanks.

Similar Threads

  1. [CLOSED] TreePanel editor appears twice..
    By PhilG in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2012, 4:08 PM
  2. [CLOSED] CompositeField appears on elements collection
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 04, 2011, 11:37 PM
  3. [CLOSED] Why this code appears when add controls to a page?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2010, 12:39 PM
  4. <ext:ListItem don't appears in my form???
    By carlosmupe in forum 1.x Help
    Replies: 4
    Last Post: Dec 30, 2009, 3:56 PM
  5. [CLOSED] Gridpanel inside tabpanel appears outside tab
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 12, 2009, 10:42 AM

Posting Permissions