PDA

View Full Version : Problem with filtering a sample gridpanel



ramkira
31 Dec 2009, 6:51 AM
Regards to all, was testing the filters in gridpanel example, but I encounter a problem.

What's wrong in this code .. (:|





Ext.onReady(function(){

Ext.QuickTips.init();

var url = {
local: 'grid-filter.json', // 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 = true;

store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
//url: (local ? url.local : url.remote),
remoteSort: false,
sortInfo: {
field: 'nro_prm',
direction: 'ASC'
},
storeId: 'myStore',

// reader configs
//idProperty: 'nro_prm',
root: 'data',
totalProperty: 'total',
fields: [{
name: 'nro_prm'
}, {
name: 'fec_prm',
type: 'date'
}, {
name: 'raz_tra'
}, {
name: 'nro_plc'
},{
name: 'conductor'
},{
name: 'destino'
}]
});

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: 'string',
dataIndex: 'nro_prm'
}, {
type: 'date',
dataIndex: 'fec_prm',
disabled: true
}, {
type: 'string',
dataIndex: 'raz_tra'
}, {
type: 'string',
dataIndex: 'nro_plc'
}, {
type: 'string',
dataIndex: 'conductor',
}, {
type: 'string',
dataIndex: 'destino'
}]
});

// 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: 'nro_prm',
header: 'Nro Pre',
// 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: 'fec_prm',
header: 'Fecha',
id: 'fec_prm',
filter: {
type: 'date'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: 'raz_tra',
header: 'Transportista',
filter: {
type: 'string' // specify type here or in store fields config
}
}, {
dataIndex: 'nro_plc',
header: 'Placa',
filter: {
type: 'string'
//,phpMode: true
}
}, {
dataIndex: 'conductor',
header: 'Conductor',
filter: {
type: 'string' // specify type here or in store fields config
}
}, {
dataIndex: 'destino',
header: 'Destino'
}];

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: 'raz_tra',
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: 'Codificar: ' + (encode ? 'On' : 'Off'),
tooltip: 'Activar filtro de codificación on/off',
enableToggle: true,
handler: function (button, state) {
var encode = (grid.filters.encode===true) ? false : true;
var text = 'Codificar: ' + (encode ? 'On' : 'Off');
// remove the prior parameters from the last load options
grid.filters.cleanParams(grid.getStore().lastOptions.params);
grid.filters.encode = encode;
button.setText(text);
grid.getStore().reload();
}
},{
text: 'Filtros : ' + (local ? 'On' : 'Off'),
tooltip: 'Alternar entre Filtrado remoto/local',
enableToggle: true,
handler: function (button, state) {
var local = (grid.filters.local===true) ? false : true;
var text = 'Filtrado local: ' + (local ? 'On' : 'Off');
var newUrl = local ? url.local : url.remote;

// update the GridFilter setting
grid.filters.local = local;
// bind the store again so GridFilters is listening to appropriate store event
grid.filters.bindStore(grid.getStore());
// update the url for the proxy
grid.getStore().proxy.setApi('read', newUrl);

button.setText(text);
grid.getStore().reload();
}
},{
text: 'Todos los datos de filtro',
tooltip: 'Obtener datos para Filtro de Lista',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('Todos los datos del Filtro',data);
}
},{
text: 'Limpiar filtro de datos',
handler: function () {
grid.filters.clearFilters();
}
},{
text: 'Reconfigurar listado',
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();

});