PDA

View Full Version : GridFeature don't work



rafareyes7
7 Feb 2014, 11:15 PM
Hi, 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!

scottmartin
11 Feb 2014, 1:31 PM
Seems to work like this: (filtered on 'Fijo')



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.FiltersFeature', 'Ext.toolbar.Paging']);


Ext.onReady(function() {

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', {
store: store,
height: 300,
features: [filtersCfg],
title: "grid view",

columns: [{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
}, {
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto'
}],

renderTo: Ext.getBody()

});

});