Great plugin! Thanks a lot.
Printable View
Great plugin! Thanks a lot.
Hi,
When I add Grouped Header to the first column the filter is not displayed. Implemented filter to http://dev.sencha.com/deploy/ext-4.0...ader-grid.html
Posted the same issue at http://www.sencha.com/forum/showthre...201#post696201
My Code
Thank you in advance.Code:Ext.onReady(function() {
Ext.QuickTips.init();
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{
text: 'Company',
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
filter: {
xtype: 'textfield'
}
}]
}, {
text: 'Stock Price',
columns: [{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
filter: {
xtype: 'textfield'
}
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}, {
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
}]
}, {
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
height: 350,
width: 600,
title: 'Grouped Header Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
},
plugins: [Ext.create('Ext.ux.grid.GridHeaderFilters')]
});
});
Hi,
I'm trying to use your plugin, my grid needs to often change its columns, but when I callthis exception gets throwed:Code:this.reconfigure(null, aColumns);
Maybe this plugin is incompatible with reconfigure?Code:this.containers[column.id] is undefined
GridHeaderFilters.js Line 489
The only way I can get it working is putting it on the first columns definitions, the problems starts after reconfigure.
Thank you in advance.
Marco
Congratulations, great plugin!
There was an issue when having a grid in a hidden panel. The grid was rendered (rendered = true, afterender was called), but the actual columns were not rendered yet so renderFilters failed. the solution was to not listen to grid's after render, but to headerCt's after render, like so :
Code:
this.grid.on({
scope: this,
columnresize: this.resizeFilterContainer,
beforedestroy: this.onDestroy,
beforestatesave: this.saveFilters,
afterlayout: this.adjustFilterWidth
});
this.grid.headerCt.on({
scope: this,
afterrender: function(){
this.renderFilters();
}
});
Hello, very great plugin :-)
But I have found a bug
When you try to create a grid having this plugin like this
I have fixed itCode:var panel = Ext.create('grid', { region: 'center' });
this.centerArea.add(panel);
this.centerArea.layout.setActiveItem(panel);
Code:adjustFilterWidth: function()
{
if(!this.containers) return;
var columns = this.grid.headerCt.getGridColumns(true);
for(var c=0; c < columns.length; c++)
{
var column = columns[c];
if (column.filter && column.flex)
{
this.containers[column.id].setWidth(column.getWidth()-1);
}
}
},
Hi!I'm using EXTJS 4.0 .Your plugin is great! Now I need a dynamic grid (json configuired) with filters on the header .With it I can get the store and columnModel from the database.But the plugin doesn't work because the filters disappear.Can't it re-configure the columnModel after grid initialization? Can you help me?Thanks!
Grid re-configuration is not currently supported.Quote:
Originally Posted by KakaxiTaDie
Thanks to puya and Jad for their fixes and suggestions. I'm going to update the source code on the first page ASAP.
In my case the filter renders well but throws a db error while trying to filter on any column.
The error for example that I get is: missing right parenthesis
Does any body get this type of error or any db error.
Shouldn't the plugin handle the filtering of data?
Filtering on date fields do not respect the dateFormat of the filter definition.
I've made a change locally on my system so that the format provided is respected, so the filter that gets passed back to the server (on remote filters) look as I expect. Is this the way you'd expect date filtering to take place?Code:filter: { xtype: 'datefield', dateFormat: 'Y-m-d H:i:s' }
Code:parseFilters: function()
{
var filters = {};
var filterValue;
if(!this.fields)
return filters;
for(var fn in this.fields)
{
var field = this.fields[fn];
if(!field.isDisabled())
{
filterValue = field.getValue();
if (field.dateFormat && Ext.isDate(filterValue))
{
filters[field.filterName] = Ext.Date.format(filterValue,field.dateFormat);
}
else
{
filters[field.filterName] = filterValue;
}
}
}
return filters;
},
Also, on more general note, why is the filter that is created on the store differently formatted (when inspecting the params on the server-side call) than the filter that the Ext.ux.grid.FiltersFeature uses?
Ext.ux.grid.FiltersFeature params looks something like ...
Ext.ux.grid.GridHeaderFilters params looks something like ...Code:filter[{"type":"date","comparison":"eq","value":"1999-01-01 00:00:00","field":"SUNRISE_DATE"}]
With this "fix" in place, my params for date ftilering look consistent as the provided dateFormat suggests.Code:filter[{"property":"SUNRISE_DATE","value":"1999-01-01T00:00:00"}]
If I am doing this incorrectly, or my expectations of the dateFormat handing is incorrect, any guidance would be appreciated.Code:filter[{"property":"SUNRISE_DATE","value":"1999-01-01 00:00:00"}]
Thanks.
Is there a way to use server-side filtering with this plugin ?
UPDATE: I figured out it can be done with store's remoteFilter parameter