[CLOSED] GridPanel with Header Filter, filterDate is not work

  1. #1

    [CLOSED] GridPanel with Header Filter, filterDate is not work

    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>
    Last edited by Daniil; Jul 26, 2012 at 8:28 AM. Reason: [CLOSED]
  2. #2
    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"
  3. #3
    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>

Similar Threads

  1. Remote filter for Header Filter
    By huzzy143 in forum 1.x Help
    Replies: 2
    Last Post: May 09, 2012, 3:43 PM
  2. Replies: 8
    Last Post: Sep 13, 2011, 8:47 PM
  3. [CLOSED] Server-side filter, using Header filters
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 11, 2011, 5:01 PM
  4. filter above grid header
    By rnachman in forum 1.x Help
    Replies: 1
    Last Post: Feb 08, 2011, 9:01 PM
  5. Replies: 3
    Last Post: Aug 13, 2010, 4:25 PM

Tags for this Thread

Posting Permissions