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:
Thanks!Code: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); } } ]
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:
Code: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); } } ]
Firebug return:Code: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); } }] } } ] },The filters are working fine, no problems - no events in console.Code:this.resetHeaderFilters is not a function [IMG]chrome://firebug/content/blank.gif[/IMG] this.resetHeaderFilters(true);
Thanks.
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:
Otherwise you can set element ID and call it in the button handler function:Code: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); } }] } });
Code:{ 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); } }] } }
Hi d.zucconi,
are you going to migrate this great plugin to the pure ExtJS 4.0+ version (without sandboxing)?
Thanks!
Best regards, qwx.
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".
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:
Code: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); } },
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:
To react to the hiding/unhiding of columns, onColHidden (around line 600) has to be modified:PHP Code:
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
PHP Code:
onColHidden: function(cm, index, bHidden){
this.grid.getView().updateColumnHidden(index, bHidden);
this.onResize(); //Recalculate the widths of all columns
},