PDA

View Full Version : Grid Filter example not working



raz0r1
31 Aug 2011, 2:51 AM
Edit: sry for wrong title...

How can i get the filter fields directly shown in the header of the columns?
i want something like a live filter..

and where can i download it? 4.0.2a does not contain that extension.

http://docs.sencha.com/ext-js/4-0/#!/example/grid-filtering/grid-filter-local.html

somebody have an idea on that?

thanks in advice.

aacoro
31 Aug 2011, 5:08 AM
Hi raz0r1,

I use these filters as well. They are included in the 4.0.2a. Look in this folder:



ext-4.0.2a\examples\ux\grid


There you will find the classes that you need.

aacoro
31 Aug 2011, 5:12 AM
Hi raz0r1,

I use these filters as well. They are included in the 4.0.2a. Look in this folder:

There you will find the classes that you need.

EDIT: I think I misunderstood your question. :))

So how to get it working:

1 First create the filters:


var filters = {
ftype: 'filters',
encode: false,
local: true,
filters: [
{ type: 'String', dataIndex: 'YourDataIndexOfYourField' }
etc....
]
};


2. Define in your grid that you want to use this feature:


features : [filters]


3. Define in you column model that it is filterable:


{
header : 'I'm a column!',
sortable : true,
width : 300,
dataIndex : 'YourDataIndexOfYourField',
filterable : true
}


Good luck!

ranjansingh
13 Sep 2011, 4:08 AM
Hi,

I tried with the sencha code, but couldn't able to get the filter features.

Please find my code:


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux.grid', './resources/lib/ext-4.0.2/ux/grid');
Ext.Loader.setPath('Ext.ux.grid.filter', './resources/lib/ext-4.0.2/ux/grid/filter');
Ext.Loader.setPath('Ext.ux.grid.menu', './resources/lib/ext-4.0.2/ux/grid/menu');
Ext.Loader.setPath('Ext.ux.menu', './resources/lib/ext-4.0.2/ux/menu');

Ext.require([
'Ext.ux.grid.GridFilters',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.filter.Filter',
'Ext.ux.grid.filter.StringFilter',
'Ext.ux.grid.filter.NumericFilter',
'Ext.ux.grid.filter.ListFilter',
'Ext.ux.grid.filter.BooleanFilter',
'Ext.ux.menu.ListMenu',
'Ext.ux.menu.RangeMenu',
'Ext.ux.menu.EditableItem'
]);

var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: true, // defaults to false (remote filtering)

// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large']
}
]
};

/*var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large']
}
]});*/

Ext.define('DEMO.view.autosuggest.DataGridFilter' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.DataGridFilter',
title: 'Data Grid Filter',
store: 'DataGridFilterStore',

loadMask: true,
features: [filters],
//plugins: filters,

columns: [
{
text: 'Id',
dataIndex: 'id',
filterable: true
}, {
text: 'Name',
dataIndex: 'name',
filter: {
type: 'string'
}
}, {
text: 'Size',
dataIndex: 'size',
filter: {
type: 'list',
options: ['small', 'medium', 'large']
}
}, {
dataIndex: 'visible',
text: 'Visible'
// this column's filter is defined in the filters feature config
}
],

initComponent: function() {
this.callParent(arguments);
}
});

Please naybody let me know what am i doing wrong in my code and any suggestion

thanks,
Ranjan

raz0r1
13 Sep 2011, 4:56 AM
sry i did not get the edit of aacoro.

i though as you, that there are no filters but the filters are not in the column headers anymore. now they are in the drop down where you also can hide columns. there is a new submenu "filter". there is the filter field.

the problem is that i need them directly in the header like in Ext 3

ranjansingh
13 Sep 2011, 7:06 AM
Hi Raz0r1,

I am looking for Data Grid Filter solution. Can you please dercribe in details, as i am not clear what are you trying to tell.

In my application, when i click on the column it doesn't display the filter option for data indeed it display the sorting and all.

http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html (http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html)

thanks,
Ranjan

aacoro
13 Sep 2011, 7:18 AM
Hi,

I tried with the sencha code, but couldn't able to get the filter features.

Please find my code:


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux.grid', './resources/lib/ext-4.0.2/ux/grid');
Ext.Loader.setPath('Ext.ux.grid.filter', './resources/lib/ext-4.0.2/ux/grid/filter');
Ext.Loader.setPath('Ext.ux.grid.menu', './resources/lib/ext-4.0.2/ux/grid/menu');
Ext.Loader.setPath('Ext.ux.menu', './resources/lib/ext-4.0.2/ux/menu');

Ext.require([
'Ext.ux.grid.GridFilters',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.filter.Filter',
'Ext.ux.grid.filter.StringFilter',
'Ext.ux.grid.filter.NumericFilter',
'Ext.ux.grid.filter.ListFilter',
'Ext.ux.grid.filter.BooleanFilter',
'Ext.ux.menu.ListMenu',
'Ext.ux.menu.RangeMenu',
'Ext.ux.menu.EditableItem'
]);

var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: true, // defaults to false (remote filtering)

// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large']
}
]
};

/*var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large']
}
]});*/

Ext.define('DEMO.view.autosuggest.DataGridFilter' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.DataGridFilter',
title: 'Data Grid Filter',
store: 'DataGridFilterStore',

loadMask: true,
features: [filters],
//plugins: filters,

columns: [
{
text: 'Id',
dataIndex: 'id',
filterable: true
}, {
text: 'Name',
dataIndex: 'name',
filter: {
type: 'string'
}
}, {
text: 'Size',
dataIndex: 'size',
filter: {
type: 'list',
options: ['small', 'medium', 'large']
}
}, {
dataIndex: 'visible',
text: 'Visible'
// this column's filter is defined in the filters feature config
}
],

initComponent: function() {
this.callParent(arguments);
}
});

Please naybody let me know what am i doing wrong in my code and any suggestion

thanks,
Ranjan

Does your code do something??

I miss the Ext.onReady and your store is a string??


store: 'DataGridFilterStore',

Try to build you DEMO step by step:

First panel
then empty grid, then columns, then store, and then filter.

Can you post your code that will execute in JSFiddle (http://jsfiddle.net/)?

ranjansingh
14 Sep 2011, 11:25 PM
Hi Aacoro,

I have jotted down some points which i tried so far, to get clear picture of my problems:

1. my code is displaying the grid data from store so far.
2. regarding store: 'DataGridFilterStore', am define the store in store package. Indeed i can able to populate the data in the grid.
3. i tried with the steps by steps which you suggested. am able to run the code successfully till the (grid + store). After that, once i added the filter code. I got an error message of "Cls is not a contructor" when i click for first time in any of column header.
4. I tried to add the css part of FilterFeatures "ux-filtered-column" in our common css file.

May i know where am i gone wrong and whats need to be added in my code.

thanks,
Ranjan

aacoro
14 Sep 2011, 11:52 PM
Can you post reproducable code or create a JSFiddle for it?