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...
Code:
<%@ 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>
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
RE: Gridpanel within Tab appears outside of Tab
Hi Vlad,
If i remove the window it disappears completely !
RE: Gridpanel within Tab appears outside of Tab
How about inside an Ext:Panel instead of a Ext:Window?
Cheers,
Timothy
RE: Gridpanel within Tab appears outside of Tab
You da man Timothy, thanks.
