Grid Header Filters

**Pigor** · 30 May 2012 1:44 PM

Hello,

I want to filter the buffered records. I know that it isn't possible with extjs4 but is it possible with this plugin?

Thank you

**karaozgur** · 10 Jun 2012 11:21 PM

Hi,

Thanks for plugin.

If grid has locked column, header filter does not works.
Here is my fix for it:

Code:

    renderFilters: function () {
       ...
        var columns = this.grid.view.getGridColumns(); //var columns = this.grid.headerCt.getGridColumns(true);
        ...
    adjustFilterWidth: function () {
       ...
        var columns = this.grid.view.getGridColumns(); //this.grid.headerCt.getGridColumns(true);
       ...

**mrhomer** · 12 Jun 2012 12:51 AM

I get an error in line 553 filterField' is undefined in the HeaderFilters.js. That is when i use the function setHeaderFilter

Fix please

Thanks

**mcouillard** · 13 Jun 2012 8:06 AM

Here's a fix to manually setting column filters, like when setting default filters on page load.

Code:

initFilterFields: function(filters)
    {
        if(!this.fields)
            return;

        for(var fn in  filters)
        {
            var value = filters[fn];
            var field = this.fields[fn];
            if(field)
            {
                //this.setFieldValue(filterField, initValue); //wrong!
                this.setFieldValue(field,value);             //fixed!
            }
        }
    },

**qwikso** · 14 Jun 2012 3:27 AM

Hi d.zucconi,
I'm using this plugin more than two years and I'm absolutely satisfied. Now we are thinking about migrating to ExtJS 4.x but I've already found out, that there is any support for grid reconfiguration - this is unfortunately a very important functionality in our application and it's now a 'blocker' for us

Please, which priority has this feature in your TODO list resp. when can we expect it?

Thanks a lot.
Best regards
qwikso

**prijithkr** · 27 Jun 2012 9:10 PM

Object Expected Error

Happy to know that they have a GridHeader Plugin for EXT 4.1 too
But i am still facing problem in including it to the code, i tried implementing it in a basic code, still i get an exception

I think i am missing something in including the plug in....

This is my app.js file

Code:

Ext.Loader.setConfig({enabled:true});
JPMC = Ext.create("Ext.app.Application",{
    name: 'JPMC',
    appFolder: 'app',
    launch: function() {
 
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
 plugins: [new Ext.ux.grid.GridHeaderFilters()],
    columns: [
        { header: 'Name',  dataIndex: 'name', filter: {xtype:"textfield", filterName:"Name"} },
        { header: 'Email', dataIndex: 'email', flex: 1,filter: {xtype:"textfield", filterName:"Email"} },
        { header: 'Phone', dataIndex: 'phone', filter: {xtype:"textfield", filterName:"Phone"} }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
    }

});

I have also copy pasted the GridHeaderFilter.js inside the src/ux/grid folder and included it in my HTML file too

Code:

<html>
<head>
    <title>JPMC Compliance</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1/resources/css/ext-all.css">
 <link rel="stylesheet" type="text/css" href="resources/css/compliance.css">
 
    <script type="text/javascript" src="extjs-4.1/ext-all.js"></script>
 <script type="text/javascript" src="extjs-4.1/src/ux/grid/GridHeaderFilters.js"></script>
 <script type="text/javascript" src="app.js"></script>
 <script type="text/javascript">
        Ext.Loader.setPath({
            'Ext.ux': 'extjs-4.1/src/ux/'
        });
        Ext.require([
      
            'Ext.ux.grid.GridHeaderFilters',
            'Ext.grid.*'
         
        ]);
    </script>
 
 
 
</head>
<body>
</body>
</html>

But still i get an Object expected error, Am I missing something in including the plug in or am I doing anything extra? Please help me, I am very new to EXTJS,

**Jad** · 28 Jun 2012 11:31 PM

Hello
I have a column like this

Code:

{
                    header: 'Creation Date',
                    dataIndex: 'creationDate',
                    renderer: function(value) { return value ? Ext.Date.format(new Date(value), Ext.Date.patterns.ShortDate) : ''; },
                    flex: 1,
                    field: 'textfield',
                    format: Ext.Date.patterns.ShortDate,
                    filter: [
                        Ext.create('Ext.form.field.Date', {
                            filterName:"CDFrom",
                            format: Ext.Date.patterns.ShortDate,
                            hideLabel :true,
                            listeners: {
                                change: function(field, newValue, oldValue) {
                                    headerFilterPlugin.applyFilters();
                                },
                                buffer: 200
                            }
                        }),
                        Ext.create('Ext.form.field.Date', {
                            filterName:"CDTo",
                            format: Ext.Date.patterns.ShortDate,
                            hideLabel :true,
                            listeners: {
                                change: function(field, newValue, oldValue) {
                                    headerFilterPlugin.applyFilters();
                                },
                                buffer: 200
                            }
                        })
                    ]
                }

How can i have this 2 fields in the same line with width 50%

Thanks for help

**Jad** · 29 Jun 2012 5:19 AM

maybe very bad a solution :

Code:

me.addListener('headerfiltersrender', function (grid, filters) {
            var resize = function (component) {
                component.anchor = '50%';
                component.doComponentLayout();
            };


            resize(filters.CDFrom);
            resize(filters.CDTo);


        }, me);

**pierluigi** · 2 Jul 2012 3:27 AM

Sorry, my question is very simple:
How to install this plugin? Where I put the file?

Thanks

**Jad** · 2 Jul 2012 3:39 AM

Hello you can install the file like this

yourAppFolder/Ext/ux/grid/GridHeaderFilters.js

Grid Header Filters

Thread Tools

Search Thread

Display

initFilterFields fix to setFieldValue

initFilterFields fix to setFieldValue

Missing support for the grid reconfiguration

Missing support for the grid reconfiguration

field with width 50%

field with width 50%

How To Install Grid Header Filters

How To Install Grid Header Filters

where install the file

where install the file

Tags for this Thread