PDA

View Full Version : Problem with Grid Filtering



tanhadil_love4u
19 Nov 2010, 5:19 AM
I wanted to use the filtering option provided in the Grid Filtering Grid in Sencha. The problem is that I don't want to get the data to read from any file in the json format. I want to generate the json format on the page itself, instead of reading it from another file.

Is that possible in Sencha?

Another way of doing this is integrating the filter of the above mentioned grid with the progress bar pager grid of sencha. I didn't get anything related to that on how to integrate the filter with the progress bar pager grid.

Is that possible in Sencha?

Any of the above solutions will solve my problem. Please help me.

Thanx in advance

tanhadil_love4u
21 Nov 2010, 9:22 PM
Hey guys................Please help me............Its very problematic and I dont get a solution to it................

Condor
22 Nov 2010, 1:15 AM
Set local:true in the grid filter plugin to make it work on local data.

tanhadil_love4u
22 Nov 2010, 1:47 AM
Set local:true in the grid filter plugin to make it work on local data.

Thanks for the reply.

but I already set the "local" to "true".

My question is that the JsonStore of Sencha reads the data from a file whether it is a local file or any remote file. I don't want to read the data from any file (neither remote nor local), instead I want to pass the data on the same file rather than reading it. Any suggestions on how I can do that?

Condor
22 Nov 2010, 1:50 AM
Sure, use the 'data' config option or the loadData() method of the store.

tanhadil_love4u
22 Nov 2010, 9:54 PM
The data config option doesn't work in JsonStore. It gives an error. My sample code is given here below. Please make any corrections if I am writing it incorrectly.:


Ext.onReady(function(){

Ext.QuickTips.init();

// for this demo configure local and remote urls for demo purposes
var url = {
local: 'grid-filter.php', // static data file
remote: 'grid-filter.php'
};

// configure whether filter query is encoded or not (initially)
var encode = false;

// configure whether filtering is performed locally or remotely (initially)
var local = false;

store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: (local ? url.local : url.remote),
remoteSort: false,
sortInfo: {
field: 'company',
direction: 'ASC'
},
storeId: 'myStore',
// reader configs
idProperty: 'id',
root: 'data',
//totalProperty: 'total',
totalProperty: 2,

fields: [{
name: 'id'
}, {
name: 'price',
type: 'float'
}, {
name: 'company'
}, {
name: 'date',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}, {
name: 'size'
}, {
name: 'visible',
type: 'boolean'
}],

data:[
{
id:"1",
price:"71.72",
company:"3m Co",
date:"2007-09-01 00:00:00",
size:"large",
visible:"1"
},
{
id:"2",
price:"29.01",
company:"Aloca Inc",
date:"2007-08-01 00:00:00",
size:"medium",
visible:"0"
}
]

});

var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'company',
disabled: true
}, {
type: 'numeric',
dataIndex: 'price'
}, {
type: 'date',
dataIndex: 'date'
}, {
type: 'list',
dataIndex: 'size',
options: ['small', 'medium', 'large', 'extra large'],
phpMode: true
}, {
type: 'boolean',
dataIndex: 'visible'
}]
});

// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColModel = function (finish, start) {

var columns = [{
dataIndex: 'id',
header: 'Id',
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'company',
header: 'Company',
id: 'company',
filter: {
type: 'string'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: 'price',
header: 'Price',
filter: {
//type: 'numeric' // specify type here or in store fields config
}
}, {
dataIndex: 'size',
header: 'Size',
filter: {
type: 'list',
options: ['small', 'medium', 'large', 'extra large']
//,phpMode: true
}
}, {
dataIndex: 'date',
header: 'Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
filter: {
//type: 'date' // specify type here or in store fields config
}
}, {
dataIndex: 'visible',
header: 'Visible',
filter: {
//type: 'boolean' // specify type here or in store fields config
}
}];

return new Ext.grid.ColumnModel({
columns: columns.slice(start || 0, finish),
defaults: {
sortable: true
}
});
};

var grid = new Ext.grid.GridPanel({
border: false,
store: store,
colModel: createColModel(4),
loadMask: true,
plugins: [filters],
autoExpandColumn: 'company',
listeners: {
render: {
fn: function(){
store.load({
params: {
start: 0,
limit: 50
}
});
}
}
},
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 50,
plugins: [filters]
})
});


// add some buttons to bottom toolbar just for demonstration purposes
grid.getBottomToolbar().add([
'->',
{
text: 'All Filter Data',
tooltip: 'Get Filter Data for Grid',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('All Filter Data',data);
}
},{
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
},{
text: 'Reconfigure Grid',
handler: function () {
grid.reconfigure(store, createColModel(6));
}

}
]);

var win = new Ext.Window({
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
items: grid
}).show();


});

tanhadil_love4u
23 Nov 2010, 2:39 AM
Hey Condor! Please help me with the code mentioned above. I am stuck at this place. Thanx for all the support given.

Condor
23 Nov 2010, 2:43 AM
You specified root:'data', so your data should be:

root: 'data',
idProperty: 'id',
totalProperty: 'total',
data: {
total: 2,
data: [{
id:"1",
price:"71.72",
company:"3m Co",
date:"2007-09-01 00:00:00",
size:"large",
visible:"1"
},{
id:"2",
price:"29.01",
company:"Aloca Inc",
date:"2007-08-01 00:00:00",
size:"medium",
visible:"0"
}]
}