Grid header filters

**harshp** · 31 Jan 2013, 4:39 AM

Hi,

Please check below code, I can see grid filter row , but it is not filtering data.
Do I need to write any code for filtering data from data store.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">


  <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
  <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext-all.js"></script>
  
  <script type="text/javascript" src="ext-all.js"></script>


 <script type="text/javascript" src="GridHeaderFilters.js"></script>


    <script type="text/javascript">
Ext.onReady(function() {


              // sample static data for the store
   var fields=[{
          type: 'string',
          name: 'item'
    },{
          type: 'string',
          name: 'description'
    },{
          type: 'string',
          name: 'po'
    },{
          type: 'string',
          name: 'style'
    },{
          type: 'string',
          name: 'size'
    },{
          type: 'int',
          name: 'ysqty'
    },{
          type: 'int',
          name: 'ssqty'
    },{
          type: 'string',
          name: 'remark'
    }]
    var columns=[{
       dataIndex: 'item',
       header: 'Item',
       filter: {xtype:"textfield", filterName:"CODE"},
       enableKeyEvents: true
    },{
       dataIndex: 'description',
       header: 'Description',
       width:300,
       filter: {xtype:"textfield", filterName:"CODE"},
       enableKeyEvents: true
    },{
       dataIndex: 'po',
       header: 'PO'
    },{
       dataIndex: 'style',
       header: 'Style'
    },{
       dataIndex: 'size',
       header: 'Size'
    },{
       dataIndex: 'ysqty',
       header: 'ysqty'
    },{
       dataIndex: 'ssqty',
       header: 'ssqty'
    },{
       dataIndex: 'remark',
       header: 'remark'
    }]
    var data=[['item1','aaaaa','PO1','style1','L',90,85,'SDFDSF'],['item1','aaaaa','PO1','style1','M',70,65,'SDFDSF']
    ,['item1','aaaaa','PO2','style4','M',70,65,'SDFDSF'],['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF']
    ,['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF'],['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF']]
    
    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        title: 'Sales By Location',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: data
        }),
        columns: columns,
        viewConfig: {
            forceFit: true
        },
        plugins: [new Ext.ux.grid.GridHeaderFilters()]
    });
    
})
    </script>
 </head>


 <body> <div id="grid"></div>
 
 </body>
</html>

**bizcatalyst** · 6 Mar 2013, 12:35 PM

Originally Posted by daddie888

Hello, i use version 2.0.3 of GridHeaderFilters with Ext Js 3.3.1 and have the following problem in IE7 but not in FF3.5
When the window is too small to show the full width of the columns the width of the columns shrinks to show all of the table but not the filters, they are cut off by the next filter/column
See the attachment for an example.

Here my ColumnModel

Code:

cm1Midoc = new Ext.grid.ColumnModel({
      defaults: {"sortable": true, "menuDisabled":false, "align":"right"},
      columns: [
        {"id":"id", "header": "id", "hidden": true, "dataIndex": "id", "width": 40, "filter":[{xtype:"numberfield",style: 'text-align: right', emptyText:'van'},{xtype:"numberfield", style: 'text-align: right', emptyText:'tot'}]},
        {"header": "rnr13", "dataIndex": "rnr13", "width": 50, filter: [{xtype:"textfield", style: 'text-align: right'}, {xtype:"textfield", style: 'text-align: right'}]},
        {"header": "datumlijst", "dataIndex": "datumlijst", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "datvan", "dataIndex": "datvan", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "dattot", "dataIndex": "dattot", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "waarde", "dataIndex": "waarde", "renderer": "Ext.util.Format.number", "width": 30, filter: [{xtype:"numberfield"},{xtype:"numberfield"}]}
      ]
    });

Can anybody give me a hint ?

Thanks !!

Peter

Thanks for the example using multiple filters in one column, now I can do numeric and date ranges and display them, Yay!

**mthaxmiller** · 3 May 2013, 12:56 PM

Does anyone have an example of hiding the filters for the latest version of this plugin? I have a button to show/hide the filters and this works for that:
toggleFilters: function(bShow) {
for(fc in this.filterContainers) {
var container = this.filterContainers[fc];
if(bShow) {
container.show();
} else {
container.hide();
}
}

}

However, if I call toggleFilters to hide them when the grid is first rendered the above does not work. Any ideas on how to fix this issue? I tried adding doLayout and syncSize, still no luck.

**wm003** · 7 May 2013, 7:41 AM

Can you try to use it in the "afterrender" event?

**mthaxmiller** · 7 May 2013, 9:39 AM

Thanks for replying....
Adding a call to toggle the filters in the afterrender event only works if we add a 2 second delay. Something in the DOM is not be refreshed to hide the filters, if you view the filters using firebug the hidden attribute is true. Any more ideas?

**stetou** · 28 May 2013, 12:19 PM

Originally Posted by scottmartin

Ultraman .... then you _must_ know Giant Robot! .. yes, I am showing my age ...

The filter is just sending the POST params .. you have to tell your app (server side) what to do with the information.

Regards,
Scott.

That is important information...but I don't figure what you mean....
The post is on a json file
http://.../antidote.json?start=0&antidote=Thiosulfate

Can't see what I can do...
Can you please give more details?
Thanks in advance

**scottmartin** · 28 May 2013, 12:25 PM

The filter information is sent in the header:

ex:

Code:

filter:[{"property":"user_name","value":"admin","type":"string","operator":"like"}]

The server side would need to parse this and then apply the proper filter on the DB/table and send the filtered data back to the client

Scott.

**stetou** · 29 May 2013, 5:01 AM

Thanks for the details.
I thought the filter was managed on client side directly inside the store (geoext.featurestore...a geojson)

**stetou** · 4 Jun 2013, 12:21 PM

I got it working.
I need to launch a function when the value of a combobox as changed. I tried to use a listener on the combo without success (see code below). What is the right way to know when the value changed?

Code:

filter: 
            {
                xtype: "combo",
                store: liste_rss,                
                valueField: 'valeur',
                displayField: 'valeur',
                triggerAction: 'all',
                listeners:
                {
                    select://also tried with 'change'
                    {
                        fn:function(combo, value) 
                        {
                                alert('allo');
                        }
                    }
                }
            }

**stetou** · 5 Jun 2013, 10:30 AM

It seems that the combo's listener is not working inside the filter definition.
Please tell me if this is a bug.

Thread: Grid header filters

Thread Tools

Search Thread

Display

Plugin not working

Hide filters

Hide filters

listeners on combo

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News