Aug 07, 2012, 9:22 PM
[CLOSED] Version 2.0 Grid not displaying in TabPanel with ViewPort
I am having an issue with the Grid not being displayed when I display it in a TabPanel in a ViewPort
When I click the MenuItem, the page is loaded into the TabPanel, however, the grid does not display.
Your assistance is greatly appreciated.
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<%--<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />--%>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, id, url, menuItem, tabTitle) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: tabTitle,
closable: true,
menuItem: menuItem,
loader: {
url: url,
rendered: "frame",
loadMask: {
showMask: true,
msg: "Loading " + url + "..."
}
}
});
tab.on("activate", function(tab){
#{MenuPanel1}.setSelection(tab.menuItem);
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Viewport ID="viewPort1" runat="server" StyleSpec="background-color: transparent;" Layout="BorderLayout">
<Items>
<ext:Panel
Id="pnlTop"
runat="server"
Region="North"
Border="false">
<Items>
<ext:Toolbar ID="tbMain" runat="server" Cls="customToolbar">
<Items>
<ext:ToolbarFill />
<ext:ToolbarSeparator />
<ext:Button ID="bLogin" runat="server" Text="Sign-In" Icon="Lock" Cls="blue" >
</ext:Button>
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
<ext:MenuPanel
ID="MenuPanel1"
runat="server"
Width="200"
Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Test Page 1">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'TestPage1.aspx', this, 'Test Page 1');" />
</Listeners>
</ext:MenuItem>
<ext:MenuSeparator />
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" Margins="0 4 4 0"
EnableTabScroll="true"
Cls="tabs"
MinTabWidth="115">
<Items>
<ext:Panel ID="Panel2"
BodyStyle="background-color: transparent;"
runat="server"
Title="Home"
Border="false">
<Loader ID="Loader1" runat="server" Url="../Views/Home/Default.aspx" Mode="Frame" >
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel ID="pnlSouth" runat="server" Region="South" Height="30" Border="false" Header="false" BodyStyle="background-color: transparent;" HideBorders="true">
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server" HideBorders="true" Cls="customToolbar" >
<Items>
<ext:Label ID="Label1" runat="server">
<Content>
Powered by <a href="#" class="topbaruserinfo">TestSolution.com</a> Copyrighted 2012 all rights reserved.
</Content>
</ext:Label>
<ext:ToolbarSeparator />
<ext:ToolbarFill />
<ext:ToolbarSeparator />
<ext:Button ID="Button1" Icon="Help" Text="Help" runat="server" />
<ext:ToolbarSeparator />
<ext:Button ID="Button3" Icon="Information" Text="Privacy" runat="server">
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
here is the code for the TestPage1.aspx page:<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Store1_RefreshData(object sender, StoreReadDataEventArgs e)
{
List<object> data = FiltersTestData.Data;
string s = e.Parameters[this.GridFilters1.ParamPrefix];
//or with hardcoding - string s = e.Parameters["filter"];;
//-- start filtering ------------------------------------------------------------
if (!string.IsNullOrEmpty(s))
{
FilterConditions fc = new FilterConditions(s);
foreach (FilterCondition condition in fc.Conditions)
{
Comparison comparison = condition.Comparison;
string field = condition.Field;
FilterType type = condition.Type;
object value;
switch(condition.Type)
{
case FilterType.Boolean:
value = condition.Value<bool>();
break;
case FilterType.Date:
value = condition.Value<DateTime>();
break;
case FilterType.List:
value = condition.List;
break;
case FilterType.Numeric:
if (data.Count > 0 && data[0].GetType().GetProperty(field).PropertyType == typeof(int))
{
value = condition.Value<int>();
}
else
{
value = condition.Value<double>();
}
break;
case FilterType.String:
value = condition.Value<string>();
break;
default:
throw new ArgumentOutOfRangeException();
}
data.RemoveAll(
item =>
{
object oValue = item.GetType().GetProperty(field).GetValue(item, null);
IComparable cItem = oValue as IComparable;
switch (comparison)
{
case Comparison.Eq:
switch(type)
{
case FilterType.List:
return !(value as List<string>).Contains(oValue.ToString());
case FilterType.String:
return !oValue.ToString().StartsWith(value.ToString());
default:
return !cItem.Equals(value);
}
case Comparison.Gt:
return cItem.CompareTo(value) < 1;
case Comparison.Lt:
return cItem.CompareTo(value) > -1;
default:
throw new ArgumentOutOfRangeException();
}
}
);
}
}
//-- end filtering ------------------------------------------------------------
//-- start sorting ------------------------------------------------------------
if (e.Sort.Length > 0)
{
data.Sort(delegate(object x, object y)
{
object a;
object b;
int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;
a = x.GetType().GetProperty(e.Sort[0].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[0].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}
//-- end sorting ------------------------------------------------------------
//-- start paging ------------------------------------------------------------
var limit = e.Limit;
if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}
List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
//-- end paging ------------------------------------------------------------
//The Total can be set in RefreshData event as below
//or (Store1.Proxy.Proxy as PageProxy).Total in anywhere
//Please pay attention that the Total make a sence only during DirectEvent because
//the Store with PageProxy get/refresh data using ajax request
e.Total = data.Count;
this.GridPanel1.GetStore().DataSource = rangeData;
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel with Remote Filtering, Sorting and Paging - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>GridPanel with Remote Filtering, Sorting and Paging</h1>
<p>Please see column header menu for apllying filters</p>
<ext:Window
ID="Window1"
runat="server"
Width="700"
Height="400"
Closable="false"
Collapsible="true"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Border="false">
<Store>
<ext:Store
runat="server"
RemoteSort="true"
OnReadData="Store1_RefreshData"
PageSize="10">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Date" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
<ext:ModelField Name="Size" Type="String" />
<ext:ModelField Name="Visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id" />
<ext:Column runat="server" Text="Company" DataIndex="Company" />
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
<ext:Column runat="server" Text="Size" DataIndex="Size" />
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters ID="GridFilters1" runat="server">
<Filters>
<ext:NumericFilter DataIndex="Id" />
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:DateFilter DataIndex="Date">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:ListFilter DataIndex="Size" Options="extra small,small,medium,large,extra large" />
<ext:BooleanFilter DataIndex="Visible" />
</Filters>
</ext:GridFilters>
</Features>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>
This code is from your Ext.net Examples project. When I click the MenuItem, the page is loaded into the TabPanel, however, the grid does not display.
Your assistance is greatly appreciated.
Last edited by Daniil; Aug 09, 2012 at 4:15 AM.
Reason: Please use [CODE] tags, [CLOSED]