PDA

View Full Version : Ext.ux.grid.FiltersFeature how to set filter programmatically



Ex_Soft
13 Sep 2012, 4:03 AM
I found Apply grid filter programmatically from function (http://stackoverflow.com/questions/9629531/apply-grid-filter-programmatically-from-function) But this (http://stackoverflow.com/a/12008947) doesn't work properly with string, date, list:


Ext.require([
"Ext.ux.grid.FiltersFeature"
]);

Ext.define("TestModel", {
extend: "Ext.data.Model",
idProperty: "id",
fields: [
{ name: "id", type: "int" },
{ name: "fstring", type: "string" },
{ name: "ffloat", type: "float" },
{ name: "fdate", type: "date", dateFormat: "c" },
{ name: "fboolean", type: "boolean" },
{ name: "fint", type: "int" }
]
});

Ext.define("ListModel", {
extend: "Ext.data.Model",
idProperty: "id",
fields: [
{ name: "id", type: "int" },
{ name: "fstring", type: "string" }
]
});

Ext.onReady(function() {
Ext.QuickTips.init();

var
list = [
[ 1, "Record# 1" ],
[ 2, "Record# 2" ],
[ 3, "Record# 3" ]
],
storeList = Ext.create("Ext.data.ArrayStore", {
model: "ListModel",
data: list
}),
listRenderer = function (value, metaData, record, rowIndex, colIndex, store, view) {
var
listRecord;

return (listRecord = storeList.getById(value)) ? listRecord.get("fstring") : "!storeList.getById(name)";
},
store = Ext.create("Ext.data.ArrayStore", {
model: "TestModel",
data: [
[ 1, "Record# 1", 123.45, "1900-01-01", true, 1 ],
[ 2, "Record# 2", 234.56, "1901-01-01", false, 1 ],
[ 3, "Record# 3", 345.67, "1902-01-01", false, 2 ],
[ 4, "Record# 4", 456.78, "1903-01-01", false, 3 ]
]
}),
grid = Ext.create("Ext.grid.Panel", {
store: store,
columns: [
{ dataIndex: "id", header: "id", filterable: true },
{ dataIndex: "fstring", header: "fstring", filterable: true, flex: 1 },
{ dataIndex: "ffloat", header: "ffloat", filterable: true },
{ dataIndex: "fdate", header: "fdate", renderer: Ext.util.Format.dateRenderer("d.m.Y"), filter: { type: "date", dateFormat: "d.m.Y", afterText: "afterText", beforeText: "beforeText", onText: "onText" } },
{ dataIndex: "fboolean", header: "fboolean", filterable: true },
{ dataIndex: "fint", header: "fint", renderer: listRenderer, filter: { type: "list", dataIndex: "fint", options: list } }
],
features: [{
ftype: "filters",
local: true
}],
dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [{
text: "id",
handler: function(btn, e) {
setValue(btn, { eq: 1 });
}
}, {
text: "fstring",
handler: function(btn, e) {
setValue(btn, "Record# 1");
}
}, {
text: "ffloat",
handler: function(btn, e) {
setValue(btn, { eq: 123.45 });
}
}, {
text: "fdate",
handler: function(btn, e) {
setValue(btn, { on: Ext.Date.parse("01.01.1900", "d.m.Y") });
}
}, {
text: "fboolean",
handler: function(btn, e) {
setValue(btn, true);
}
}, {
text: "fint",
handler: function(btn, e) {
setValue(btn, [1]);
}
}]
}],
listeners: {
afterrender: function(grid, eOpts) {
grid.filters.createFilters();
}
},
renderTo: Ext.getBody()
});
});

function setValue(btn, value) {
var
grid = btn.up("grid"),
filter = grid.filters.getFilter(btn.text);

if(filter)
{
//filter.setActive(true);
filter.setValue(value);
//filter.setActive(true);
}
}

How to set filter for string, date, list?

stalek
17 Sep 2012, 6:19 AM
You have to initialize your filters like below:



filtersCfg.createFilters();

filtersCfg.filters.each(function (filter) {
filter.setActive(true);
filter.setActive(false);
});

BTW:
you should do it in your initComponent() and then in beforeRender you can do this operation: store.loadPage(1);