PDA

View Full Version : [CLOSED] Standalone Store



cwolcott
Mar 21, 2012, 5:44 PM
In v1.2 we typically define a store in the markup outside of a GridPanel or other control. But in v2.0 this is not working.



<asp:LinqDataSource ID="LDS" runat="server" ... />
<ext:Store ID="Store1" runat="server" DataSourceID="LDS">
<Model>
...
</Model>
</ext:Store>
...
<ext:GridPanel runat="server" StoreId="Store1" >
...
</ext:GridPanel>


When I run the code I get:

Control with type 'System.Web.UI.WebControls.LinqDataSource' cannot be handled by layout.

Through my limited understanding of the code it looks like it can not determine its container and thus the excpetion is raised.

Daniil
Mar 21, 2012, 7:23 PM
Hi,

It means that you are using LinqDataSource as an item of some container with some layout manager.

I guess you use it within a content page or, maybe, a user control.

Please look at the example.

Example Master Page

<%@ Master 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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Layout="FitLayout">
<Content>
<asp:ContentPlaceHolder ID="CenterContent" runat="server" />
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


Example Content Page

<%@ Page Language="C#" MasterPageFile="~/Master.Master" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
this.Store1.DataBind();
}
}
</script>
<asp:Content runat="server" ContentPlaceHolderID="CenterContent">
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel runat="server" AutoHeight="true" StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</asp:Content>


This example throws

Control with type 'Ext.Net.Store' cannot be handled by layout
because it's considered as an item of the Panel with Layout="FitLayout" (the Panel is inside Master Page).

Removing the Layout="FitLayout" solves the problem. But, obviously, with no FitLayout functionality.

To get such behavior in Ext.NET v1 we need to wrap a content page or user control content in a layout control. In Ext.NET v2 it's managed automatically according to Layout property of a container. Finally, we have removed layout controls from the v2.

cwolcott
Mar 22, 2012, 1:47 AM
Here is how I am trying to use it. I defined the LinqDataSource and Store outside any control and then referenced the StoreID in the GridFilters - ListFilter for Major Organizations.

So what is the best way to make this work?



<%@ Page Title="" Language="C#" MasterPageFile="~/WAM.Master" AutoEventWireup="true"
CodeBehind="Users.aspx.cs" Inherits="Users" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CenterContent" runat="server">
<asp:LinqDataSource ID="MajorOrgs_LDS" runat="server" ContextTypeName="WAM.WAMDataContext"
TableName="MajorOrganizations" OrderBy="MajorOrgNm" />
<ext:Store ID="MajorOrgs_Store" runat="server" DataSourceID="MajorOrgs_LDS">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="MajorOrgNm">
<Fields>
<ext:ModelField Name="MajOrgId" Mapping="MajorOrgID" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:TabPanel ID="ActiveUserTabPanel" runat="server" Region="Center">
<Items>
<ext:Panel ID="ActiveUserPanel" runat="server" Title="Active" Icon="UserGreen" Layout="BorderLayout">
<Items>
<ext:GridPanel runat="server" ID="ActiveUsers" Region="Center">
<Store>
<ext:Store ID="ActiveUsers_Store" runat="server" RemoteSort="true" PageSize="25"
OnReadData="ActiveUsers_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="UserId">
<Fields>
<ext:ModelField Name="DisplayNm" Mapping="DisplayNm" Type="String" />
<ext:ModelField Name="UserId" Mapping="UserId" Type="Int" />
<ext:ModelField Name="UserNm" Mapping="UserNm" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
<ext:ModelField Name="SubOrgNm" Mapping="SubOrgNm" Type="String" />
<ext:ModelField Name="PersCatNm" Mapping="PersCatNm" Type="String" />
<ext:ModelField Name="DateRegistered" Mapping="DateRegistered" Type="Date" />
<ext:ModelField Name="DateUpdated" Mapping="DateUpdated" Type="Date" />
<ext:ModelField Name="DateLastLogin" Mapping="DateLastLogin" Type="Date" />
<ext:ModelField Name="IpAddressVisitedFrom" Mapping="IpAddressVisitedFrom" Type="String" />
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<%-- Keep Limit in sync with Store::PageSize --%>
<%-- Keep Limit in sync with PagingToolbar::ComboBox selectedItem --%>
<ext:Parameter Name="limit" Value="25" Mode="Raw" />
<ext:Parameter Name="start" Value="0" Mode="Raw" />
</AutoLoadParams>
<Sorters>
<ext:DataSorter Property="DisplayNm" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="DisplayNm" Hideable="false" Flex="1">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'DisplayNm');" />
</ext:Column>
<ext:NumberColumn runat="server" Text="User ID" DataIndex="UserId" Format="0" Align="Center"
Width="65" />
<ext:Column runat="server" Text="Username" DataIndex="UserNm" Width="140" Hideable="false">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'UserNm');" />
</ext:Column>
<ext:Column runat="server" Text="Major Org" DataIndex="MajorOrgNm" Width="125" />
<ext:Column runat="server" Text="Sub Org" DataIndex="SubOrgNm" Width="140">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'SubOrgNm');" />
</ext:Column>
<ext:Column runat="server" Text="Category" DataIndex="PersCatNm" />
<ext:DateColumn runat="server" Text="Registered" DataIndex="DateRegistered" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:DateColumn runat="server" Text="Updated" DataIndex="DateUpdated" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:DateColumn runat="server" Text="Last Login" DataIndex="DateLastLogin" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:Column runat="server" Text="IP Address" DataIndex="IpAddressVisitedFrom" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<View>
<ext:GridView runat="server" LoadingText="Loading data ..." StripeRows="true" TrackOver="true" />
</View>
<Features>
<ext:GridFilters ID="ActiveUsersFilters" runat="server">
<Filters>
<ext:StringFilter DataIndex="DisplayNm" />
<ext:NumericFilter DataIndex="UserId" />
<ext:StringFilter DataIndex="UserNm" />
<ext:ListFilter DataIndex="MajorOrgNm" StoreID="MajorOrgs_Store" LabelField="MajorOrgNm" />
<ext:StringFilter DataIndex="SubOrgNm" />
<ext:ListFilter DataIndex="PersCatNm" Options="Civilian, Contractor, Military" />
<ext:DateFilter DataIndex="DateRegistered" />
<ext:DateFilter DataIndex="DateUpdated" />
<ext:DateFilter DataIndex="DateLastLogin" />
<ext:StringFilter DataIndex="IpAddressVisitedFrom" />
</Filters>
</ext:GridFilters>
</Features>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Clear Filters" Icon="Erase">
<Listeners>
<Click Handler="#{ActiveUsers}.getFilterPlugin().clearFilters();" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Filter Statement" Icon="BugMagnify">
<DirectEvents>
<Click OnEvent="showFilterStatement">
<ExtraParams>
<ext:Parameter Name="gridFilters" Value="#{ActiveUsers}.getFilterPlugin().buildQuery(#{Acti veUsers}.getFilterPlugin().getFilterData())"
Encode="true" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="ActiveUserPaging" runat="server" DisplayInfo="true" DisplayMsg="Displaying active users {0} - {1} of {2}"
EmptyMsg="No active users to display">
<Items>
<ext:ComboBox ID="PageSizeCombo" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="5" />
<ext:ListItem Text="10" />
<ext:ListItem Text="25" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
</Items>
<%-- Keep SelectedItem in sync with Store::PageSize --%>
<%-- Keep SelectedItem in sync with Store::Parameters::Limit --%>
<SelectedItems>
<ext:ListItem Value="25" />
</SelectedItems>
<Listeners>
<Select Handler="#{ActiveUsers_Store}.pageSize = parseInt(this.getValue()); #{ActiveUsers_Store}.load();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSeparator />
<ext:Button ID="UserRegister" runat="server" Text="Register" Icon="Add" />
<ext:Button ID="UserInactivate" runat="server" Text="Inactivate" Icon="Delete" />
<ext:Button ID="UserEdit" runat="server" Text="Edit" Icon="Pencil" />
<ext:ToolbarFill />
<ext:Button runat="server" Icon="Help" ToolTip="Help" />
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</asp:Content>

Daniil
Mar 22, 2012, 7:39 AM
Here is how I am trying to use it. I defined the LinqDataSource and Store outside any control and then referenced the StoreID in the GridFilters - ListFilter for Major Organizations.


Well, you defined it within the <asp:Content> control. The <asp:ContentPlaceHolder> of that <asp:Content> is defined in the Master Page within some Ext.NET container with Layout option, right?

In this case the controls - LinqDataSource, Store, TabPanel - that you defined within the <asp:Content> are considered as Items of the Ext.NET container from the Master Page.



So what is the best way to make this work?


I would suggest to try the Bin feature. Regarding to my example:

Example Content Page

<%@ Page Language="C#" MasterPageFile="~/Master.Master" %>

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
this.Store1.DataBind();
}
}
</script>

<asp:Content runat="server" ContentPlaceHolderID="CenterContent">
<ext:GridPanel runat="server" StoreID="Store1">
<Bin>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Container runat="server">
<Content>
<asp:LinqDataSource runat="server" /> <%-- Just to demonstrate, it's not used. --%>
</Content>
</ext:Container>
</Bin>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</asp:Content>

More info about the Bin feature:
http://forums.ext.net/showthread.php?13726&p=57259&viewfull=1#post57259

cwolcott
Mar 22, 2012, 7:33 PM
OK. I moved things around and I don't receive runtime errors anymore, but the store is hung on just showing the mask "Loading ..." when I select the filter for MajorOrgNm. Since this worked in v1.2 I am just looking for an example that works in v2.0Beta.




<%@ Page Title="" Language="C#" MasterPageFile="~/WAM.Master" AutoEventWireup="true"
CodeBehind="Users.aspx.cs" Inherits="Users" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CenterContent" runat="server">
<ext:TabPanel ID="ActiveUserTabPanel" runat="server" Region="Center">
<Items>
<ext:Panel ID="ActiveUserPanel" runat="server" Title="Active" Icon="UserGreen" Layout="BorderLayout">
<Items>
<ext:GridPanel runat="server" ID="ActiveUsers" Region="Center">
<%-- --%>
<%-- --%>
<%-- Added bin w/ Store & LinqDataSource to be used by ListFilter w/ DataIndex="MajorOrgNm" --%>
<%-- --%>
<Bin>
<ext:Store ID="MajorOrgs_Store" runat="server" DataSourceID="MajorOrgs_LDS">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="MajorOrgNm">
<Fields>
<ext:ModelField Name="MajOrgId" Mapping="MajorOrgID" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Container runat="server" >
<Content>
<asp:LinqDataSource ID="MajorOrgs_LDS" runat="server" ContextTypeName="WAM.WAMDataContext"
TableName="MajorOrganizations" OrderBy="MajorOrgNm" />
</Content>
</ext:Containter>
</Bin>
<Store>
<ext:Store ID="ActiveUsers_Store" runat="server" RemoteSort="true" PageSize="25"
OnReadData="ActiveUsers_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="UserId">
<Fields>
<ext:ModelField Name="DisplayNm" Mapping="DisplayNm" Type="String" />
<ext:ModelField Name="UserId" Mapping="UserId" Type="Int" />
<ext:ModelField Name="UserNm" Mapping="UserNm" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
<ext:ModelField Name="SubOrgNm" Mapping="SubOrgNm" Type="String" />
<ext:ModelField Name="PersCatNm" Mapping="PersCatNm" Type="String" />
<ext:ModelField Name="DateRegistered" Mapping="DateRegistered" Type="Date" />
<ext:ModelField Name="DateUpdated" Mapping="DateUpdated" Type="Date" />
<ext:ModelField Name="DateLastLogin" Mapping="DateLastLogin" Type="Date" />
<ext:ModelField Name="IpAddressVisitedFrom" Mapping="IpAddressVisitedFrom" Type="String" />
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<%-- Keep Limit in sync with Store::PageSize --%>
<%-- Keep Limit in sync with PagingToolbar::ComboBox selectedItem --%>
<ext:Parameter Name="limit" Value="25" Mode="Raw" />
<ext:Parameter Name="start" Value="0" Mode="Raw" />
</AutoLoadParams>
<Sorters>
<ext:DataSorter Property="DisplayNm" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="DisplayNm" Hideable="false" Flex="1">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'DisplayNm');" />
</ext:Column>
<ext:NumberColumn runat="server" Text="User ID" DataIndex="UserId" Format="0" Align="Center"
Width="65" />
<ext:Column runat="server" Text="Username" DataIndex="UserNm" Width="140" Hideable="false">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'UserNm');" />
</ext:Column>
<ext:Column runat="server" Text="Major Org" DataIndex="MajorOrgNm" Width="125" />
<ext:Column runat="server" Text="Sub Org" DataIndex="SubOrgNm" Width="140">
<Renderer Handler="return highlightFilterRenderer(value, #{ActiveUsers}, 'SubOrgNm');" />
</ext:Column>
<ext:Column runat="server" Text="Category" DataIndex="PersCatNm" />
<ext:DateColumn runat="server" Text="Registered" DataIndex="DateRegistered" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:DateColumn runat="server" Text="Updated" DataIndex="DateUpdated" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:DateColumn runat="server" Text="Last Login" DataIndex="DateLastLogin" Format="Y-MM-dd hh:mm a"
Width="120" />
<ext:Column runat="server" Text="IP Address" DataIndex="IpAddressVisitedFrom" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<View>
<ext:GridView runat="server" LoadingText="Loading data ..." StripeRows="true" TrackOver="true" />
</View>
<Features>
<ext:GridFilters ID="ActiveUsersFilters" runat="server">
<Filters>
<ext:StringFilter DataIndex="DisplayNm" />
<ext:NumericFilter DataIndex="UserId" />
<ext:StringFilter DataIndex="UserNm" />
<ext:ListFilter DataIndex="MajorOrgNm" StoreID="MajorOrgs_Store" LabelField="MajorOrgNm" />
<ext:StringFilter DataIndex="SubOrgNm" />
<ext:ListFilter DataIndex="PersCatNm" Options="Civilian, Contractor, Military" />
<ext:DateFilter DataIndex="DateRegistered" />
<ext:DateFilter DataIndex="DateUpdated" />
<ext:DateFilter DataIndex="DateLastLogin" />
<ext:StringFilter DataIndex="IpAddressVisitedFrom" />
</Filters>
</ext:GridFilters>
</Features>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Clear Filters" Icon="Erase">
<Listeners>
<Click Handler="#{ActiveUsers}.getFilterPlugin().clearFilters();" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Filter Statement" Icon="BugMagnify">
<DirectEvents>
<Click OnEvent="showFilterStatement">
<ExtraParams>
<ext:Parameter Name="gridFilters" Value="#{ActiveUsers}.getFilterPlugin().buildQuery(#{Acti veUsers}.getFilterPlugin().getFilterData())"
Encode="true" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="ActiveUserPaging" runat="server" DisplayInfo="true" DisplayMsg="Displaying active users {0} - {1} of {2}"
EmptyMsg="No active users to display">
<Items>
<ext:ComboBox ID="PageSizeCombo" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="5" />
<ext:ListItem Text="10" />
<ext:ListItem Text="25" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
</Items>
<%-- Keep SelectedItem in sync with Store::PageSize --%>
<%-- Keep SelectedItem in sync with Store::Parameters::Limit --%>
<SelectedItems>
<ext:ListItem Value="25" />
</SelectedItems>
<Listeners>
<Select Handler="#{ActiveUsers_Store}.pageSize = parseInt(this.getValue()); #{ActiveUsers_Store}.load();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSeparator />
<ext:Button ID="UserRegister" runat="server" Text="Register" Icon="Add" />
<ext:Button ID="UserInactivate" runat="server" Text="Inactivate" Icon="Delete" />
<ext:Button ID="UserEdit" runat="server" Text="Edit" Icon="Pencil" />
<ext:ToolbarFill />
<ext:Button runat="server" Icon="Help" ToolTip="Help" />
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</asp:Content>

Daniil
Mar 22, 2012, 7:41 PM
Since this worked in v1.2 I am just looking for an example that works in v2.0Beta.

Well, to get it the same as it's in Ext.NET v1.2, you can just remove the Layout property of the Panel from the Master Page which consists the CenterContent ContentPlaceHolder and revert back all changes regarding Bin.

I will check it:

the store is hung on just showing the mask "Loading ..." when I select the filter for MajorOrgNm.

Daniil
Mar 22, 2012, 7:59 PM
Well, there is a separate issue with ListFilter with StoreID.

Here is the test sample.

Example

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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" },
};
store.DataBind();

this.Store1.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" },
};
this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Store
ID="Store1"
runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server" Local="true">
<Filters>
<ext:ListFilter DataIndex="test" StoreID="Store1" LabelField="id" />
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
</body>
</html>

Daniil
Mar 22, 2012, 8:55 PM
Fixed in SVN.

Please note that:

1. GridFilters must be configured with Local="true" in case with local filtering.

2. ListFilter Store must have "id" ModelField. It will be used as values of items.

cwolcott
Mar 23, 2012, 1:19 AM
Ok we are getting closer. I pulled in Revision 3902. The list of Major Orginations is now displayed, but when I select an item the value for it is null. The PersCatNm listfilter defined via the attribute "Options" works great. Is I missing an attribute for the MajorOrgNm listfilter.

In the behind code when I loop through each item selected the id is null [foreach (string id in condition.List)], but like I said the same could works fine for the PersCatNm listfilter.



<ext:GridFilters ID="ActiveUsersFilters" runat="server" >
<Filters>
<ext:ListFilter DataIndex="MajorOrgNm" StoreID="MajorOrgs_Store" LabelField="MajorOrgNm" />
<ext:ListFilter DataIndex="PersCatNm" Options="Civilian, Contractor, Military" />
</Filters>
</ext:GridFilters>


Below is part of my code behind that builds my where clause:



...
foreach (FilterCondition condition in fc.Conditions)
{
Comparison comparison = condition.Comparison;
string field = condition.Field;
FilterType type = condition.Type;


switch (field)
{
case "PersCatNm":
int i = 0;
whereClause += " and PersCategory in (";
foreach (string cat in condition.List)
{
i = i + 1;
whereClause += String.Format("'{0}'", persCategory[cat]);
if (i < condition.List.Count)
whereClause += ",";
}
whereClause += ")";
break;

case "MajorOrgNm":
int j = 0;
whereClause += " and MajorOrgNm in (";
foreach (string id in condition.List)
{
j = j + 1;
whereClause += String.Format("'{0}'", id);
if (j < condition.List.Count)
whereClause += ",";
}
whereClause += ")";
break;

default:
break;
...
}

I did not add the attribute Local="true" to GridFilters because I am performing remote filtering. If I set it to true then the filtering is only performed on the data in the store. I am performing SQL Server paging.

Daniil
Mar 23, 2012, 11:05 AM
ListFilter Store must have "id" ModelField (it's hardcoded on ExtJS level). It will be used as values of items.

Please see how it can look regarding our Remote Filtering example.

Example


<ext:Store ID="StoreSizes" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="sizeName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:ListFilter DataIndex="Size" StoreID="StoreSizes" LabelField="sizeName" />

It means that you shoud replace

Name="MajorOrgID"
with

Name="id"
in the Model of the MajorOrgs_Store.

Example

<ext:Store ID="MajorOrgs_Store" runat="server" DataSourceID="MajorOrgs_LDS">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" Mapping="MajorOrgID" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

Here is the full example.

Example

<%@ 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 Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.StoreSizes.DataSource = new List<object>()
{
new
{
id = 0,
sizeName = "extra small"
},
new
{
id = 1,
sizeName = "small"
},
new
{
id = 2,
sizeName = "medium"
},
new
{
id = 3,
sizeName = "large"
},
new
{
id = 4,
sizeName = "extra large"
}
};

this.StoreSizes.DataBind();
}
}

protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
List<object> data = FiltersTestData.Data;

string s = e.Parameters[this.GridFilters1.ParamPrefix];
//or with hardcoding - string s = e.Parameters["gridfilters"];;

//-- 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>

<script type="text/javascript">
var sizeRenderer = function (value) {
var r = App.StoreSizes.getById(value);

return r.data.sizeName;
};
</script>
</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:Store ID="StoreSizes" runat="server">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="sizeName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<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="Int" />
<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">
<Renderer Fn="sizeRenderer" />
</ext:Column>
<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" StoreID="StoreSizes" LabelField="sizeName" />
<%--<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>

FilterTestData.cs

using System;
using System.Collections.Generic;

public class FiltersTestData
{
public static List<object> Data
{
get
{
var goods = new List<object>
{
new
{
Id = 1,
Price = 71.72,
Company = "3m Co",
Date = new DateTime(2007, 9, 1),
Size = 3,
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2007, 08, 01),
Size = 2,
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2007, 08, 03),
Size = 3,
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2008, 01, 04),
Size = 4,
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2008, 03, 04),
Size = 1,
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2008, 02, 01),
Size = 4,
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2008, 01, 01),
Size = 3,
Visible = true
},
new
{
Id = 8,
Price = 67.27,
Company = "Caterpillar Inc.",
Date = new DateTime(2007, 12, 03),
Size = 2,
Visible = true
},
new
{
Id = 9,
Price = 49.37,
Company = "Citigroup, Inc.",
Date = new DateTime(2007, 11, 24),
Size = 3,
Visible = true
},
new
{
Id = 10,
Price = 40.48,
Company = "E.I. du Pont de Nemours and Company",
Date = new DateTime(2007, 05, 09),
Size = 4,
Visible = false
},
new
{
Id = 11,
Price = 68.1,
Company = "Exxon Mobile Corp",
Date = new DateTime(2007, 12, 12),
Size = 3,
Visible = true
},
new
{
Id = 12,
Price = 34.14,
Company = "General Electric Company",
Date = new DateTime(2008, 06, 16),
Size = 4,
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2006, 12, 07),
Size = 2,
Visible = true
},
new
{
Id = 14,
Price = 36.53,
Company = "Hewlett-Packard Co.",
Date = new DateTime(2007, 05, 13),
Size = 3,
Visible = true
},
new
{
Id = 15,
Price = 38.77,
Company = "Honweywell Intl Inc",
Date = new DateTime(2006, 11, 07),
Size = 2,
Visible = false
},
new
{
Id = 16,
Price = 19.88,
Company = "Intel Corporation",
Date = new DateTime(2007, 01, 09),
Size = 1,
Visible = true
},
new
{
Id = 17,
Price = 81.41,
Company = "International Business Machines",
Date = new DateTime(2005, 01, 21),
Size = 4,
Visible = true
},
new
{
Id = 18,
Price = 64.72,
Company = "Johnson & Johnson",
Date = new DateTime(2008, 01, 10),
Size = 4,
Visible = true
},
new
{
Id = 19,
Price = 45.73,
Company = "JP Morgan & Chase & Co",
Date = new DateTime(2008, 02, 20),
Size = 3,
Visible = false
},
new
{
Id = 20,
Price = 36.76,
Company = "McDonald's Corporation",
Date = new DateTime(2007, 06, 12),
Size = 3,
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2007, 12, 30),
Size = 1,
Visible = false
},
new
{
Id = 22,
Price = 45.07,
Company = "The Coca-Cola Company",
Date = new DateTime(2007, 01, 30),
Size = 2,
Visible = false
},
new
{
Id = 23,
Price = 34.64,
Company = "The Home Depot, Inc",
Date = new DateTime(2006, 12, 31),
Size = 1,
Visible = true
},
new
{
Id = 24,
Price = 61.91,
Company = "The Procter & Gamble Company",
Date = new DateTime(2007, 04, 08),
Size = 4,
Visible = true
},
new
{
Id = 25,
Price = 63.26,
Company = "United Technologies Corporation",
Date = new DateTime(2006, 06, 04),
Size = 2,
Visible = true
},
new
{
Id = 26,
Price = 35.57,
Company = "Verizon Communications",
Date = new DateTime(2005, 07, 09),
Size = 1,
Visible = false
},
new
{
Id = 27,
Price = 45.45,
Company = "Wal-Mart Stores, Inc",
Date = new DateTime(2006, 09, 09),
Size = 3,
Visible = true
}
};

return goods;
}
}
}

cwolcott
Mar 23, 2012, 12:47 PM
Everything works like I want it. Used your suggestion.



<ext:Store ID="MajorOrgs_Store" runat="server" DataSourceID="MajorOrgs_LDS">
<Model>
<ext:Model runat="server">
<Fields>
<%-- ListFilter Store must have "id" ModelField (it's hardcoded on ExtJS level). --%>
<%-- It will be used as values of items. --%>
<ext:ModelField Name="id" Mapping="MajorOrgID" Type="String" />
<ext:ModelField Name="MajorOrgNm" Mapping="MajorOrgNm" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

cwolcott
Mar 23, 2012, 12:49 PM
A related question. When I specify "Options" for the ListFilter can I also provide the values I want returned (e.g., "C", "K", "M") or am I stuck with "Civilian", "Contractor", "Military" as the return values.




<ext:GridFilters ID="ActiveUsersFilters" runat="server" >
<Filters>
<ext:ListFilter DataIndex="PersCatNm" Options="Civilian, Contractor, Military" />
</Filters>
</ext:GridFilters>

Daniil
Mar 23, 2012, 1:37 PM
A related question. When I specify "Options" for the ListFilter can I also provide the values I want returned (e.g., "C", "K", "M") or am I stuck with "Civilian", "Contractor", "Military" as the return values.



<ext:GridFilters ID="ActiveUsersFilters" runat="server" >
<Filters>
<ext:ListFilter DataIndex="PersCatNm" Options="Civilian, Contractor, Military" />
</Filters>
</ext:GridFilters>


The answer is here:
http://forums.ext.net/showthread.php?18000