PDA

View Full Version : [CLOSED] GridPanel with Header Filter, filterDate is not work



gs_user
Jul 25, 2012, 6:53 AM
GridPanel with Header Filter, filterDate is not work?

Another problem is Date Can't Show....i do't know why?
My date format is "yyyy/MM/dd"

Maybe my date format is wrong? How to Set?

following is my code:

<%@ 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)
{
this.refreshdata();
}
}


protected void refreshdata() //自寫function,主要為查詢用
{

object data =new object[] {
new object[] { "1", "test", "fa", "fa", "2012/7/25 上午 12:00:00" },
new object[] { "2", "test2", "fa2", "fa2", "2012/7/25 上午 12:00:00" }
};
this.Store1.DataSource = data;
this.Store1.DataBind();

}



protected void GridPanel_Refresh(object sender, StoreReadDataEventArgs e) //GridPanel 更新按紐
{
refreshdata();
}


</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">

var applyFilter = function (field) {
var store = #{GridPanel1}.getStore();
store.filterBy(getRecordFilter());
};

var clearFilter = function () {
#{tfh_TS201}.reset();
#{tfh_TS203}.reset();
#{tfh_TS204}.reset();
#{df_TS205}.reset();
#{Store1}.clearFilter();
}

var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (typeof val != "string") {
return value.length == 0;
}

return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};

var filterDate = function (value, dataIndex, record) {
var val = Ext.Date.clearTime(record.get(dataIndex), true).getTime();

if (!Ext.isEmpty(value, false) && val != Ext.Date.clearTime(value, true).getTime()) {
return false;
}
return true;
};

var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (!Ext.isEmpty(value, false) && val != value) {
return false;
}

return true;
};

var getRecordFilter = function () {
var f = [];

f.push({
filter: function (record) {
return filterNumber(#{tfh_TS201}.getValue(), "TS201", record);
}
});

f.push({
filter: function (record) {
return filterString(#{tfh_TS203}.getValue()||"", "TS203", record);
}
});

f.push({
filter: function (record) {
return filterString(#{tfh_TS204}.getValue()||"", "TS204", record);
}
});

f.push({
filter: function (record) {
return filterDate(#{df_TS205}.getValue(), "TS205", record);
}
});

var len = f.length;

return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Toolbar ID="Toolbar1" runat="server" Region="North">
<Items>
<ext:Button ID="bt_query" runat="server" Text="_Query" Icon="Accept">

</ext:Button>

<ext:Button ID="bt_add" runat="server" Text="_Add" Icon="ApplicationAdd" >

</ext:Button>

<ext:Button ID="bt_edit" runat="server" Text="_Edit" Icon="ApplicationEdit" >

</ext:Button>

<ext:Button ID="bt_delete" runat="server" Text="_Delete" Icon="ApplicationDelete" >

</ext:Button>

<ext:Button ID="bt_conf" runat="server" Text="_Confirm" Icon="ApplicationLightning" >

</ext:Button>

<ext:Button ID="bt_void" runat="server" Text="_Void" Icon="BulletCross" >

</ext:Button>

<ext:Button ID="bt_print" runat="server" Text="_Print" Icon="Printer" >

</ext:Button>

<ext:Button ID="bt_export" runat="server" Text="_Export" Icon="ApplicationGet" AutoPostBack="true" >

</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />

</Items>
</ext:Toolbar>
<ext:Panel ID="Panel2"
runat="server"
Region="Center"
Frame="true"
Title="Suppliers"
Icon="Lorry"
Layout="Fit"
MarginsSummary="0 5 0 5">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server">
<Store>
<ext:Store
ID="Store1"
runat="server" OnReadData="GridPanel_Refresh"
PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TS201">
<Fields>
<ext:ModelField Name="TS201" />
<ext:ModelField Name="TS203" />
<ext:ModelField Name="TS204" />
<ext:ModelField Name="TS205" Type="Date" DateFormat="yyyy/MM/dd" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="TS201" Text="_TS201" Flex="1" >
<HeaderItems>
<ext:TextField ID="tfh_TS201" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="TS203" Text="_TS203" >
<HeaderItems>
<ext:TextField ID="tfh_TS203" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column4" runat="server" DataIndex="TS204" Text="_TS204" >
<HeaderItems>
<ext:TextField ID="tfh_TS204" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:DateColumn ID="Column5" runat="server" DataIndex="TS205" Text="_TS205" >
<HeaderItems>
<ext:DateField ID="df_TS205" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</HeaderItems>
</ext:DateColumn >
<ext:Column ID="Column6" runat="server" Width="25" DataIndex="TS201" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Jul 25, 2012, 9:56 AM
Hi,

There are two issues.

1. There are 4 ModelFields, but you bind 5 objects.

new object[] { "1", "test", "fa", "fa", "2012/7/25 上午 12:00:00" }

So, the last one is not bound at all.

2. The configured DateFormat

DateFormat="yyyy/MM/dd"
doesn't match

"2012/7/25 上午 12:00:00"

For example, this string

"2012/7/25"
should be parsed with

DateFormat="yyyy/M/dd"

gs_user
Jul 26, 2012, 1:33 AM
Yes, that's my fault
The configured DateFormat must to match...

thank you for your replay!

Fllowing is modified code,that's work!
you can close ,thank you




<%@ 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)
{
this.refreshdata();
}
}


protected void refreshdata() //自寫function,主要為查詢用
{

object data =new object[] {
new object[] { "1", "test", "fa", "2012/07/25" },
new object[] { "2", "test2", "fa2", "2012/07/25" }
};
this.Store1.DataSource = data;
this.Store1.DataBind();

}



protected void GridPanel_Refresh(object sender, StoreReadDataEventArgs e) //GridPanel 更新按紐
{
refreshdata();
}


</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">

var applyFilter = function (field) {
var store = #{GridPanel1}.getStore();
store.filterBy(getRecordFilter());
};

var clearFilter = function () {
#{tfh_TS201}.reset();
#{tfh_TS203}.reset();
#{tfh_TS204}.reset();
#{df_TS205}.reset();
#{Store1}.clearFilter();
}

var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (typeof val != "string") {
return value.length == 0;
}

return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};

var filterDate = function (value, dataIndex, record) {
var val = Ext.Date.clearTime(record.get(dataIndex), true).getTime();

if (!Ext.isEmpty(value, false) && val != Ext.Date.clearTime(value, true).getTime()) {
return false;
}
return true;
};

var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (!Ext.isEmpty(value, false) && val != value) {
return false;
}

return true;
};

var getRecordFilter = function () {
var f = [];

f.push({
filter: function (record) {
return filterNumber(#{tfh_TS201}.getValue(), "TS201", record);
}
});

f.push({
filter: function (record) {
return filterString(#{tfh_TS203}.getValue()||"", "TS203", record);
}
});

f.push({
filter: function (record) {
return filterString(#{tfh_TS204}.getValue()||"", "TS204", record);
}
});

f.push({
filter: function (record) {
return filterDate(#{df_TS205}.getValue(), "TS205", record);
}
});

var len = f.length;

return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>

<ext:Panel ID="Panel2"
runat="server"
Region="Center"
Frame="true"
Title="Suppliers"
Icon="Lorry"
Layout="Fit"
MarginsSummary="0 5 0 5">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server">
<Store>
<ext:Store
ID="Store1"
runat="server" OnReadData="GridPanel_Refresh"
PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TS201">
<Fields>
<ext:ModelField Name="TS201" />
<ext:ModelField Name="TS203" />
<ext:ModelField Name="TS204" />
<ext:ModelField Name="TS205" Type="Date" DateFormat="yyyy/MM/dd" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="TS201" Text="_TS201" Flex="1" >
<HeaderItems>
<ext:TextField ID="tfh_TS201" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="TS203" Text="_TS203" >
<HeaderItems>
<ext:TextField ID="tfh_TS203" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column4" runat="server" DataIndex="TS204" Text="_TS204" >
<HeaderItems>
<ext:TextField ID="tfh_TS204" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:DateColumn ID="Column5" runat="server" DataIndex="TS205" Text="_TS205" Format="yyyy/MM/dd">
<HeaderItems>
<ext:DateField ID="df_TS205" runat="server" Editable="false" Format="yyyy/MM/dd">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</HeaderItems>
</ext:DateColumn >
<ext:Column ID="Column6" runat="server" Width="25" DataIndex="TS201" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>