I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.
Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
filters : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
Hope you guys can help me!
Replace filters: [filtersCfg],
with features: [filtersCfg],
, and remove this extra comma in dataIndex: 'concepto',
which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).