View Full Version : TransformGrid add Filter

23 Dec 2013, 11:59 AM
Hello all Together,

I'm very new @ Sencha and i'm try to read the docs and some examples.
So know i have some question and i hope u can help me.

I use this code to make a grid from a html table.

var btn = Ext.get("create-grid");
btn.on("click", function(){
// create the grid
var grid = Ext.create('Ext.ux.grid.TransformGrid', 'myTable03', {
stripeRows: false
height: 130,


I Create a TransformGrid.
After i have create the grid i have test something with the log function like console.log(grid.getStore());
There can i see data->itemes (My data From the HTML Table).

I have read in the docs that i must creat a Store for the Filter with the data, but i don't know how i can do this two things together.

Maybe its possible to give me an example or some help how i can fill the Store with data and adding Filter.

Thank u for you're help

24 Dec 2013, 2:42 PM
You would simply apply the filter to the store

property: 'name',
value: 'Bart'

25 Dec 2013, 8:19 AM
@scottmartin, thank u for u answer.. i have testing sometimes with ure answered code. I have see, when i use Ext.ux.grid.TransformGrid it would be use for every column the property tcol-0, tcol-1,.... How can i change the property from tcol-'X' to the Value from the table head column Like""Value"" or can i set the property in the HTML syntax before i convert it with TransformGrid. I would add a customer Filtering option to my TransformGrid like this. and not a rigid filter. http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid-filtering/grid-filter-local.html Thank u for ure help. Sencha

25 Dec 2013, 11:38 AM
@scottmartin thank u for u're answer.
J have test something with ure code and i have see, that the property must be the dataIndex of the Columns, so i have look with the console.log.
The Colums was renamed with something like tcol-0 after i use the function TransformGrid.
In my HTML syntax i have define the column with tr id="spalte1" like

<tr id="spalte1">
<td id="rofl">Barney Rubble</td>

So i must use this code to Filter

grid.getStore().filter({ property: 'tcol-1', // Look here!!! value: 'Bart' })

and not

grid.getStore().filter({ property: 'spalte1', //OR name of the Colum header Name/Value value: 'Bart' })

How can i set the name of tcol to my id or the column header name(Value).

In ure code above i set the filter to the Store and it will automaticle update my view..
But i would add an user Filter something like: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid-filtering/grid-filter-local.html and not a fix filter how in u're example.

Can u Give me pls an second example
thank u