Grid header filters

[LisburnLad]

Hi Steve,

I've chanded plugin destroy logic (that was incompatible with IE) and updated my last post with the new code.
IE problem seems to be fixed.

Thanks for your help

Hi - just to let you know that your change has fixed it for me as well on IE.
Ta,
Steve

[kshvakov]

resizing the grid does not change the size of the filter. For example collapse west panel in border layout (grid width filter is center region)

ExtJS 3.3, all browsers

PS : no grid.on('resize', ..) action

[webtime]

Hello all!!!
I've a dynamic grid (json configuired) created as follow:

xgrid = new Ext.ux.GridExtension({
    border:false
    ,stateful:false
     ,store:store
    ,loadMask: true
    ,stripeRows: true
    ,plugins: [new Ext.ux.grid.GridHeaderFilters()]
    ,columns:[]
    ,viewConfig:{onDataChange: function(){
        var columns = [];
         columns.push(smodel);
        for (var i = 0; i < this.ds.reader.jsonData.totcol; i++) {
                       eval("this.ds.reader.jsonData.columns[i].renderer = "+this.ds.reader.jsonData.columns[i].renderer);
                       columns.push(this.ds.reader.jsonData.columns[i]);
                    }
            this.cm.setConfig(columns);
            this.syncFocusEl(0);
            
          },
          forceFit:true,
          emptyText: 'No records.'}
            ,tbar: tb
            ,sm : smodel 
            ,bbar : new Ext.PagingToolbar({
             store: store
            ,displayInfo:true
            ,pageSize:Prowperpage
        })
});

... and this is my json..

{"metaData": 
{"totalProperty": "total",
"root": "records",
"fields": [{"name":"objectUser","mapping":"Utilizzatore","type":"string"},
{"name":"objectCode","mapping":"Oggetto","type":"string"},
{"name":"userID","mapping":"Utente\/*all","type":"string"},
{"name":"applicationArea","mapping":"Area Applicativa","type":"string"},
{"name":"mKey","mapping":"mKey","type":"string"}
]},
"success": true,
"total": 164,
"records": [-------],
"totcol":4,
"columns": [
{"dataIndex":"objectUser","header":"Utilizzatore","filter":{"xtype":"textfield"},"decorated":false},
{"dataIndex":"objectCode","header":"Oggetto","filter":{"xtype":"textfield"},"decorated":false},
{"dataIndex":"userID","header":"Utente\/*all","filter":{"xtype":"textfield"},"decorated":false},
{"dataIndex":"applicationArea","header":"Area Applicativa","filter":{"xtype":"textfield"},"decorated":false},
{"dataIndex":"mKey","header":"mKey","hidden":true}]}

... but i don't see any filter in grid... without errors...
Anyone can help?? Please..

I've using EXT 3.3.0
Thanks

EDIT..
In firebug i see that:
When the plugin is inizialized, the column model does not exist yet. This is due to the type of column model (loaded via json)???

[scottmartin]

@zucconi:

The code is rather basic:

var cmEmployee = new Ext.grid.ColumnModel({
    columns: [
    {
        header: 'Last Name',
        dataIndex: 'last_name',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_last_name'
        },
        renderer: is_inactive
    },
    {
        header: 'First Name',
        dataIndex: 'first_name',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_first_name'
        }
    },
    {
        header: 'Middle',
        dataIndex: 'middle_name',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_middle_name'
        },
        width: 75
    },
    {
        header: 'Hired',
        dataIndex: 'date_hired',
        xtype: 'datecolumn',
        filter: {
            xtype: 'datefield',
            filterName: 'cfilter_date_hired'
        }
    },
    {
        header: 'Position',
        dataIndex: 'position_name',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_position_name'
        }
    },
    {
        header: 'Captain Exp',
        dataIndex: 'date_captain_expires',
        filter: {
            xtype: 'datefield',
            filterName: 'cfilter_date_captain_expires'
        },
        renderer: date_pastdue
    },
    {
        header: 'Capt Notify',
        dataIndex: 'date_captain_notify',
        filter: {
            xtype: 'datefield',
            filterName: 'cfilter_date_captain_notify'
        },
        renderer: date_pastdue
    },
    {
        header: 'MMC Exp',
        dataIndex: 'date_uscgmmc_expires',
        filter: {
            xtype: 'datefield',
            filterName: 'cfilter_date_tankermans_expires'
        },
        renderer: date_pastdue
    },
    {
        header: 'Radar Notify',
        dataIndex: 'date_radar_notify',
        filter: {
            xtype: 'datefield',
            filterName: 'cfilter_date_radar_notify'
        },
        renderer: date_pastdue
    },
    // joined field from employee_model.php
    {
        header: 'Status',
        dataIndex: 'status_name',
        filter: {
            // column search employee status combo 
            xtype: 'combo',
            mode: 'local',
            store: storeEmployeeStatus,
            triggerAction: 'all',
            displayField: 'status_name',
            valueField: 'status_name',
            editable: true,
            lazyRender: true,
            filterName: 'cfilter_status_name'
        },
        renderer: is_inactive
    },
    {
        header: 'City',
        dataIndex: 'city',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_city'
        },
        width: 115
    },
    {
        header: 'State',
        dataIndex: 'state',
        filter: {
            xtype: 'textfield',
            filterName: 'cfilter_state'
        },
        width: 50
    },
    //    { header: 'Zip', dataIndex: 'zip', filter: {xtype: 'textfield', filterName: 'cfilter_zip'}, width: 75 },
    {
        header: 'Citizen',
        dataIndex: 'is_us_citizen',
        filter: {
            // column search employee status combo 
            xtype: 'combo',
            mode: 'local',
            store: storeYN,
            triggerAction: 'all',
            displayField: 'answer',
            valueField: 'id',
            editable: true,
            lazyRender: true,
            filterName: 'cfilter_is_us_citizen'
        },
        width: 75
    }
    ],
    defaults: {
        sortable: true
    }
});

grid:

BMS.grid.employee_grid_panel = Ext.extend(Ext.grid.GridPanel, {
    border: true,
    stripeRows: true,
    initComponent: function(){
        this.store = storeEmployees;
        this.colModel = cmEmployee;
        this.selModel = new Ext.grid.RowSelectionModel({
            singleSelect: true
        });
        this.view = new Ext.grid.GridView();
        
        this.bbar = new Ext.PagingToolbar({
            store: storeEmployees,
            // grid and PagingToolbar using same store
            displayInfo: true,
            pageSize: browsePageSize,
            plugins: new Ext.ux.SlidingPager()
        });
        BMS.grid.employee_grid_panel.superclass.initComponent.call(this);
        this.on({
            afterlayout: {
                scope: this,
                single: true,
                fn: function(){
                    this.store.load({
                        params: {
                            start: 0,
                            limit: browsePageSize,
                            sort: 'last_name',
                            dir: 'ASC'
                        }
                    });
                }
            }
        });
    },

    tbar: {}, // for search and any other buttons
    plugins: [

    new Ext.ux.grid.GridHeaderFilters({
        applyMode: 'enter',
        highlightColor: 'orange'
    })

    ],
    listeners: {
        viewReady: function(){
        ..
        }
    }
});

Regards,
Scott.

[d.zucconi]

Hello all!!!
In firebug i see that:
When the plugin is inizialized, the column model does not exist yet. This is due to the type of column model (loaded via json)???

This version of GridHeaderFilters configures filters panels for every column at init time (to decrease render time). So it needs an existing column model when the plugin is initialized. At this moment the plugin doesn't support column model re-configuration after grid initialization.

[webtime]

This version of GridHeaderFilters configures filters panels for every column at init time (to decrease render time). So it needs an existing column model when the plugin is initialized. At this moment the plugin doesn't support column model re-configuration after grid initialization.

Thank You so much.. (Grazie!!!!)

[dolittle]

I'm using the beta 2.0 version with Ext 3.3.0.
I've added two things

1. It's probably better to use containers instead of panels for the filters because they are lightweight
and there is no use for the panel UI or functionality:

renderFilterContainer: function(columnId, fcc)
{
	...
	...
	//var fc = new Ext.Panel(fcc);
	var fc = new Ext.Container(fcc);
	...
	...
},

highlightFilters: function(enable)
{
...
...
	{
		var fc = this.filterContainers[fn];
		if(fc.rendered)
		{
			if(!Ext.isEmpty(this.highlightCls))
			{
				if(enable)
					fc.getEl().addClass(this.highlightCls);
				else
					fc.getEl().removeClass(this.highlightCls);
			}
			else
				//fc.body.dom.style.backgroundColor = color;
				fc.getEl().dom.style.backgroundColor = color;
		}
	}
}

2. I'm using a grid with a card layout so the grid is rendered hidden.
The filters are rendered with width=0 because of the line:

fcc.width = td.getWidth() - 3;

To solve this I implemented onResize method:

init:function(grid) 
{
	...
	...
	this.grid.on({
		scope: this,
		render: this.onRender,
		resize: this.onResize,
		columnresize: this.onColResize,
		beforedestroy: this.destroyFilters
	});
	...
	...
},

onResize: function() 
{
	var n = this.grid.getColumnModel().getColumnCount();
	for(var i=0; i<n; i++) {
		var td = this.grid.getView().getHeaderCell(i);
		td = Ext.get(td);
		this.onColResize(i, td.getWidth());
	}
}

Thanks

[d.zucconi]

1. It's probably better to use containers instead of panels for the filters because they are lightweight
and there is no use for the panel UI or functionality

I agree. Initially I've started developing plugin with containers instead of panels but with other layouts (such as FitLayout) I've found some problems with filter fields focus (no focus clicking on fields inserted into containers with FitLayout). Now using FormLayout there are no problems and so we can return to containers.
Thanks.

2. I'm using a grid with a card layout so the grid is rendered hidden.
The filters are rendered with width=0 because of the line:

fcc.width = td.getWidth() - 3;

To solve this I implemented onResize method

Good. It should also solve other problems.

I will update the code posted here with your suggestions and other changes (new filter containers sizing and filter highlight that works directly on grid header <tr> element).

Thanks for your help dolittle

[dolittle]

Thank you for adding my changes.

In my case I need to disable some of the filters when a specific filter is chosen for one of the columns.
The following code make the plugin aware of disabled fields:

applyFilter: function(el, bLoad)
{
	...
	if(el.disabled || Ext.isEmpty(sValue))
	{
		delete this.grid.store.baseParams[el.filterName];
		delete this.filters[el.filterName];
	}
	else	
	...
},

[qwikso]

Hi d.zucconi,

it's really great to see the new release for Ext 3.3 because of more problems with the older version. I am using your filter plugin for all my grids and the "reconfigure" function is for my application really critical. Unfortunately I'm not able to repair this code to support it. Please are you planning to finish it or can you get me an advice how to do it? I need to reconfigure column model and the header filter is not visible.

Big thanks...
qwikso