PDA

View Full Version : List filter in Extjs Grid



c.marikkani
30 Oct 2013, 7:28 AM
I'm new to EXTJS and i want to create a static Grid in it. I have read some documents and created the grid and i cannot create filter for this. Here is my code and any help would be appreciated.



Ext.application({
name: 'Sample app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'age',
type: 'int'
}, {
name: 'city',
type: 'string'
}]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [{
name: 'User1',
email: 'user1@test.com',
age: 21,
city: 'City1'
}, {
name: 'User2',
email: 'user2@test.com',
age: 28,
city: 'City3'
}, {
name: 'User3',
email: 'user3@test.com',
age: 24,
city: 'City2'
}, {
name: 'User4',
email: 'user4@test.com',
age: 23,
city: 'City1'
}, {
name: 'User5',
email: 'user5@test.com',
age: 24,
city: 'City3'
}, {
name: 'User6',
email: 'user6@test.com',
age: 26,
city: 'City4'
}]
});
var optionsStore = Ext.create('Ext.data.Store', {
fields: ['city'],
proxy: {
type: 'ajax',
url: 'myData',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Users',
columns: [{
text: 'Name',
width: 100,
sortable: true,
dataIndex: 'name',
filter: {
type: 'string'
}
}, {
text: 'Email Address',
width: 150,
sortable: true,
filterable: true,
dataIndex: 'email',
hidden: false,
filter: {
type: 'string'
}
}, {
text: 'Age',
width: 150,
sortable: true,
filterable: true,
dataIndex: 'age',
hidden: false,
filter: {
type: 'numeric'
}
}, {
text: 'City',
flex: 1,
sortable: true,
dataIndex: 'city',
filter: {
type: 'list',
store: optionsStore
}
}]
});
}
});

scottmartin
1 Nov 2013, 5:27 AM
Have you added the UX?



Ext.require([
'*',
'Ext.ux.grid.FiltersFeature'
]);

c.marikkani
3 Nov 2013, 10:00 PM
Hey Scottmartin,

I've tried with pasting the required code above the ext.Application. But the Grid is not showing up now. Did i'm doing anything wrong? Please guide me.



Have you added the UX?



Ext.require([
'*',
'Ext.ux.grid.FiltersFeature'
]);

scottmartin
4 Nov 2013, 1:21 AM
Do you see any errors in the console?

Did you set your path:
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');

c.marikkani
4 Nov 2013, 5:08 AM
The setPath option made my GRID to show up and no filter is working here. I've posted my current code here. Could you please make my filter to work?



Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.require([
'*',
'Ext.ux.grid.FiltersFeature'
]);
Ext.application({
name: 'Sample app',
launch: function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'age',
type: 'int'
}, {
name: 'city',
type: 'string'
}]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [{
name: 'User1',
email: 'user1@test.com',
age: 21,
city: 'City1'
}, {
name: 'User2',
email: 'user2@test.com',
age: 28,
city: 'City3'
}, {
name: 'User3',
email: 'user3@test.com',
age: 24,
city: 'City2'
}, {
name: 'User4',
email: 'user4@test.com',
age: 23,
city: 'City1'
}, {
name: 'User5',
email: 'user5@test.com',
age: 24,
city: 'City3'
}, {
name: 'User6',
email: 'user6@test.com',
age: 26,
city: 'City4'
}]
});
var optionsStore = Ext.create('Ext.data.Store', {
fields: ['city'],
proxy: {
type: 'ajax',
url: 'myData',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Users',
columns: [{
text: 'Name',
width: 100,
sortable: true,
dataIndex: 'name',
filterable: true,
filter: {
type: 'string'
}
}, {
text: 'Email Address',
width: 150,
sortable: true,
filterable: true,
dataIndex: 'email',
hidden: false,
filter: {
type: 'string'
}
}, {
text: 'Age',
width: 150,
sortable: true,
filterable: true,
dataIndex: 'age',
hidden: false,
filter: {
type: 'numeric'
}
}, {
text: 'City',
flex: 1,
sortable: true,
dataIndex: 'city',
filterable: true,
filter: {
type: 'list',
store: optionsStore
}
}]
});
}
});




Do you see any errors in the console?

Did you set your path:
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');

wellsfargouser
14 Mar 2014, 8:50 AM
Team,

Bug:
when store.load() is called from controller, to update grid with new set of records from store.
List Filter (local mode) at column menu level not refreshed with new array object.
List filter (options) is not refreshed with new record set of store.

Does this work using [ store.collect(dataIndex); ] // output: FXFWD,FXNDF,FXSWAP_F,FXOPTION

From EXTJS4.2.1 API says,

Ext.ux.grid.filter.ListFilter - what do you mean this?

options (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-options) : Array (http://docs.sencha.com/extjs/4.2.1/#!/api/Array)
data to be used to implicitly create a data store to back this list when the data source is local. If the data for the list is remote, use the store (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-store) config instead.
If neither store nor options (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-options) is specified, then the choices list is automatically populated from all unique values of the specified dataIndex (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-dataIndex) field in the store at first time of filter invocation.



Below code given for reference.



// method returns array object
function dynaFilters(columnName) {
var options = null;
if(Ext.getCmp('gridpaneId')){
options = Ext.getCmp('gridpaneId').getStore().collect(columnName);
}
return options;
// output: FXFWD,FXNDF,FXSWAP_F,FXOPTION
}

// Grid FIlter Config
var filtersCfg = {
ftype: 'filters',
local: true, // true -> apply client-side filtering
filterCls : 'ux-filtered-column',
filters: [
{ type:'int', dataIndex: 'custId' },
{
dataIndex: 'deptType',
options: dynaFilters('deptType'),
type: 'list'
}]
};

//store called from controller
store.load();

MAHESHHM
6 Jan 2017, 2:47 PM
Team,

Bug:
when store.load() is called from controller, to update grid with new set of records from store.
List Filter (local mode) at column menu level not refreshed with new array object.
List filter (options) is not refreshed with new record set of store.

Does this work using [ store.collect(dataIndex); ] // output: FXFWD,FXNDF,FXSWAP_F,FXOPTION

From EXTJS4.2.1 API says,

Ext.ux.grid.filter.ListFilter - what do you mean this?

options (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-options) : Array (http://docs.sencha.com/extjs/4.2.1/#!/api/Array)
data to be used to implicitly create a data store to back this list when the data source is local. If the data for the list is remote, use the store (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-store) config instead.
If neither store nor options (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-options) is specified, then the choices list is automatically populated from all unique values of the specified dataIndex (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.grid.filter.ListFilter-cfg-dataIndex) field in the store at first time of filter invocation.



Below code given for reference.



// method returns array object
function dynaFilters(columnName) {
var options = null;
if(Ext.getCmp('gridpaneId')){
options = Ext.getCmp('gridpaneId').getStore().collect(columnName);
}
return options;
// output: FXFWD,FXNDF,FXSWAP_F,FXOPTION
}

// Grid FIlter Config
var filtersCfg = {
ftype: 'filters',
local: true, // true -> apply client-side filtering
filterCls : 'ux-filtered-column',
filters: [
{ type:'int', dataIndex: 'custId' },
{
dataIndex: 'deptType',
options: dynaFilters('deptType'),
type: 'list'
}]
};

//store called from controller
store.load();




were you able to fix this?