Grid header filters

[qwikso]

Thanks, but i tried and do nothing... no errors in console either...

Ok, so only for sure... Are you using the latest version of this plugin? Can you post the minimal code, which does not work for you? Otherwise it's not possible to help you. I've never had any problem with this base functionality.

[gustavo21]

Hi, i downloaded the plugin las week... so i think it´s the latest version.
I have a grid, and i put a button in the paging toolbar:

bbar: {
          xtype: 'paging',
          store: 'stConsulta',
          pageSize: 10,
      displayInfo: true,
      items: [
                  {
                    xtype: 'tbseparator',
                    width: 39,
                    height: 13
                },
                {
                    xtype: 'button',
                    text: 'Borrar Filtros',
            handler : function() {
               resetHeaderFilters(true);
            }
        }
        ]

Thanks!

[qwikso]

I wanted to see your full grid configuration. More or less you are calling resetHeaderFilters function in the btn handler, but you don't specify any scope. Therefore the code in the button's handler function isn't called in the scope of your grid object. Try this:

bbar: {
          xtype: 'paging',
          store: 'stConsulta',
          pageSize: 10,
      displayInfo: true,
      items: [
                  {
                    xtype: 'tbseparator',
                    width: 39,
                    height: 13
                },
                {
                    xtype: 'button',
                    text: 'Borrar Filtros',
                    scope : this, // or put here reference to your grid instance
                    handler : function() {
                       this.resetHeaderFilters(true);
                    }
        }
        ]

[gustavo21]

xtype: 'grid',
                        store: 'stConsulta',
                        height: 200,
                        region: 'center',
                        ref: '../legajos',
                        plugins: [new Ext.ux.grid.GridHeaderFilters()],
                        selModel: new Ext.grid.RowSelectionModel({
                            singleSelect: true
                        }),
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'Legajo',
                                header: 'Legajo',
                                sortable: true,
                                filter: {xtype:"numberfield", filterName:"filtro_Legajo"},
                                width: 12,
                                                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'Nombre',
                                header: 'Apellido, Nombres',
                                sortable: true,
                                filter: {xtype:"textfield", filterName:"nombre"},
                                align: 'left',
                                width: 50
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'DesDpto',
                                header: 'Departamento',
                                sortable: true,
                                filter: {xtype:"textfield", filterName:"departamento"},
                                width: 50
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'Tipo',
                                header: 'Tipo Empleado',
                                sortable: true,
                                filter: {xtype:"textfield", filterName:"tip_emp"},
                                width: 25,
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'Categoria',
                                header: 'Categoria',
                                sortable: true,
                                filter: {xtype:"numberfield", filterName:"categoria"},
                                width: 15,
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'Localidad',
                                header: 'Localidad',
                                sortable: true,
                                filter: {xtype:"textfield", filterName:"localidad"},
                                width: 35,
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'FecIng',
                                header: 'Fecha Ing.',
                                filter: {xtype:"datefield",format:'d-m-Y', filterName:"ingreso"},
                                sortable: true,
                                width: 25
                             }
                        ],
                                viewConfig: {
                                      forceFit: true
                          },
                        bbar: {
                            xtype: 'paging',
                            store: 'stConsulta',
                            pageSize: 10,
                            displayInfo: true,
                            items: [{
                                       xtype: 'tbseparator',
                                    width: 39,
                                    height: 13
                                },{
                                      xtype: 'button',
                                       text: 'Borrar Filtros',
                                    scope:this,
                                    handler : function() {
                                           this.resetHeaderFilters(true);
                                }
                            }]
                            }
                    }
                ]
            },

Firebug return:

this.resetHeaderFilters is not a function
[IMG]chrome://firebug/content/blank.gif[/IMG]   										this.resetHeaderFilters(true);

The filters are working fine, no problems - no events in console.

Thanks.

[qwikso]

It cannot work because you did not set any grid reference to the button scope. If you do not really need to use xtype object, this should work:

var grid = new Ext.grid.GridPanel({
	store : 'stConsulta',
	height : 200,
	region : 'center',
	ref : '../legajos',
	plugins : [new Ext.ux.grid.GridHeaderFilters()],
	selModel : new Ext.grid.RowSelectionModel({
		singleSelect : true
	}),
	columns : [{
				xtype : 'gridcolumn',
				dataIndex : 'Legajo',
				header : 'Legajo',
				sortable : true,
				filter : {
					xtype : "numberfield",
					filterName : "filtro_Legajo"
				},
				width : 12
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Nombre',
				header : 'Apellido, Nombres',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "nombre"
				},
				align : 'left',
				width : 50
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'DesDpto',
				header : 'Departamento',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "departamento"
				},
				width : 50
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Tipo',
				header : 'Tipo Empleado',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "tip_emp"
				},
				width : 25
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Categoria',
				header : 'Categoria',
				sortable : true,
				filter : {
					xtype : "numberfield",
					filterName : "categoria"
				},
				width : 15
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Localidad',
				header : 'Localidad',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "localidad"
				},
				width : 35
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'FecIng',
				header : 'Fecha Ing.',
				filter : {
					xtype : "datefield",
					format : 'd-m-Y',
					filterName : "ingreso"
				},
				sortable : true,
				width : 25
			}],
	viewConfig : {
		forceFit : true
	},
	bbar : {
		xtype : 'paging',
		store : 'stConsulta',
		pageSize : 10,
		displayInfo : true,
		items : [{
					xtype : 'tbseparator',
					width : 39,
					height : 13
				}, {
					xtype : 'button',
					text : 'Borrar Filtros',
					handler : function() {
						grid.resetHeaderFilters(true);
					}
				}]
	}
});

Otherwise you can set element ID and call it in the button handler function:

{
	xtype : 'grid',
	id : 'myGrid',
	store : 'stConsulta',
	height : 200,
	region : 'center',
	ref : '../legajos',
	plugins : [new Ext.ux.grid.GridHeaderFilters()],
	selModel : new Ext.grid.RowSelectionModel({
		singleSelect : true
	}),
	columns : [{
				xtype : 'gridcolumn',
				dataIndex : 'Legajo',
				header : 'Legajo',
				sortable : true,
				filter : {
					xtype : "numberfield",
					filterName : "filtro_Legajo"
				},
				width : 12
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Nombre',
				header : 'Apellido, Nombres',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "nombre"
				},
				align : 'left',
				width : 50
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'DesDpto',
				header : 'Departamento',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "departamento"
				},
				width : 50
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Tipo',
				header : 'Tipo Empleado',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "tip_emp"
				},
				width : 25
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Categoria',
				header : 'Categoria',
				sortable : true,
				filter : {
					xtype : "numberfield",
					filterName : "categoria"
				},
				width : 15
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'Localidad',
				header : 'Localidad',
				sortable : true,
				filter : {
					xtype : "textfield",
					filterName : "localidad"
				},
				width : 35
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'FecIng',
				header : 'Fecha Ing.',
				filter : {
					xtype : "datefield",
					format : 'd-m-Y',
					filterName : "ingreso"
				},
				sortable : true,
				width : 25
			}],
	viewConfig : {
		forceFit : true
	},
	bbar : {
		xtype : 'paging',
		store : 'stConsulta',
		pageSize : 10,
		displayInfo : true,
		items : [{
					xtype : 'tbseparator',
					width : 39,
					height : 13
				}, {
					xtype : 'button',
					text : 'Borrar Filtros',
					handler : function() {
						var grid = Ext.getCmp('myGrid');
						grid.resetHeaderFilters(true);
					}
				}]
	}
}

[gustavo21]

Thanks, now works OK!

[qwikso]

Hi d.zucconi,
are you going to migrate this great plugin to the pure ExtJS 4.0+ version (without sandboxing)?

Thanks!
Best regards, qwx.

[d.zucconi]

Hi,
Unfortunatly at the moment we're not developing on Ext 4 yet.
I think that this plugin will be migrated to be compatible with new Ext 4 grids, but at the moment I'm not sure about "when".

[qooleot]

For some reason in IE (at least IE6), when I had filters (and I didn't do a full test case, but I had 2 filters in each column) it wouldn't resize the filters but it worked in firefox. I added the code in red bold and it now works, in case anyone else runs into this:

onColResize: function(index, iWidth){
                if(!this.filterContainers)
                        return;
                var colId = this.grid.getColumnModel().getColumnId(index);
                var cnt = this.filterContainers[colId];
                if(cnt)
                {
                        if(isNaN(iWidth))
                                iWidth = 0;
                        var filterW = (iWidth < 3) ? 0 : (iWidth - 3);
                        cnt.setWidth(filterW);
                        for (var cnt_item_cnt = 0; cnt_item_cnt < cnt.items.length; cnt_item_cnt++) { 
                          cnt.items.items[cnt_item_cnt].setWidth(filterW);
                        } 
                        //Thanks to ob1
                        cnt.doLayout(false,true);
                }
        },

[mkraemer]

In case one is using this plugin in combination with a grid which has dynamically sized columns (via forceFit), it is not sufficient to react to the changed size of a single column. To resize all filters accordingly to the columns change around line 150:

scope: this,
render: this.onRender,
resize: this.onResize,
//All columns have to be resized if a single one is modified
//columnresize: this.onColResize,
columnresize:   this.onResize,
reconfigure: this.onReconfigure,
beforedestroy: this.destroyFilters 

To react to the hiding/unhiding of columns, onColHidden (around line 600) has to be modified:

onColHidden: function(cm, index, bHidden){
    this.grid.getView().updateColumnHidden(index, bHidden);
    this.onResize(); //Recalculate the widths of all columns
},