I have a tab, named "Schema", that renders a grid. One of the grid columns is checkcolumn type. What values should I pass to the store when I render my grid, so I have some of the checkboxes checked and others not checked? It must be something really trivial, but I couldn't find a solution so far.
Here is a simplified structure of the grid and the checkcolumn:
{
title: 'Schema',
listeners: {
activate: function(tab) {
myNmsps.renderSchema();
}
},
id: 'schemaTab',
items: [{
xtype: 'grid',
id: 'schema',
border: false,
data: [],
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
isEditable: true,
}
},{
text: 'Position',
dataIndex: 'position',
editor: {
xtype: 'combobox',
id: 'position',
}
}, {
text: 'Type',
dataIndex: 'type',
id: "TypeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectType',
}
}, {
text: 'Size',
dataIndex: 'size',
id: "SizeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectSize',
}
}, {
text: 'FilteringType',
dataIndex: 'filteringType',
editor: {
xtype: 'combobox',
id: 'filteringType',
}
}, {
xtype:'checkcolumn',
fieldLabel: 'checkboxIsUnique',
name: 'checkboxIsUnique',
text: 'Is Unique',
id: 'checkboxIsUniqueID',
dataIndex : 'checkboxIsUniqueIDX',
listeners:{
checkchange: function(column, rowIdx, checked, eOpts){
var schemaStore = Ext.getCmp('schema').getStore();
schemaStore.each(function(record,idx){
if(rowIdx == idx && checked===true){
record.set('checkboxIsUnique',true);
record.raw[6] = true;
} else if(rowIdx == idx && checked===false){
record.set('checkboxIsUnique',false);
record.raw[6] = false;
}
record.commit();
});
}
}
},
{
text: 'Delete',
dataIndex: 'deleteColumn',
id: "deleteColumn"
}
],
listeners: {
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
}
In the checkchange listener
And this is simplified function that generates the store and renders the grid:
renderSchema: function() {
var grid = Ext.getCmp("schema");
for (var i = 0; i < myGridData; i++) {
storeArr[i][0] = myGridData[i].name;
storeArr[i][1] = myGridData[i].type;
storeArr[i][2] = myGridData[i].size;
storeArr[i][3] = i;
storeArr[i][4] = "<button class='schemaDeleteButton x-btn'> </button>";
storeArr[i][5] = myGridData[i].filteringType;
storeArr[i][6] = myGridData[i].isUnique; // true/false;
}
var dataStore = Ext.create('Ext.data.ArrayStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'type'},
{name: 'size'},
{name: 'position'},
{name: 'deleteColumn'},
{name: 'filteringType'},
{name: 'checkboxIsUnique'}
],
data: storeArr
});
grid.suspendEvents();
grid.reconfigure(dataStore);
grid.resumeEvents();
}
So I'm passing true or false for the field checkboxIsUnique, but it doesn't affect my interface that looks like this:
The field in my dataStore in the renderSchema function should've been named 'checkboxIsUniqueIDX' - same as the dataIndex in checkcolumn component.
Related
I have filter checkbox one after the other as below:
Now I want to change it to:
My approach to this problem is:
I am selecting the DOM and looping through it to select all the check boxes:
var x = $("table .x-form-type-checkbox")
$(x).each(function (index, value){
console.log(value.children)
});
OUTPUT:
I am creating the extjs combobox dropdown as:
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Time Frame',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="radio" />', '{name}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: [{
type: 'string',
name: 'name'
}],
data: [{
"name": "Today"
}, {
"name": "This week"
}, {
"name": "This month"
}, {
"name": "Next week"
}, {
"name": "Next month"
}, {
"name": "All time"
}]
}),
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
OUTPUT:
Now I am tring to loop and map the value.children that contains each checkbox input to tpl as below:
var x = $("table .x-form-type-checkbox")
$(x).each(function(index, value) {
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Activity Status',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: value.innerHTML,
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
console.log(value.children)
});
But I am not getting expected OUT its:
Please let me know where I am doing wrong or is there a better approach.
You can implement this functionality using store.filter() method inside of combobox select event.
In this Fiddle, I have created a demo using same store.filter() method and select event of combo.
Node this is just an example you can change based on your requirement.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ComboCheckbox', {
extend: 'Ext.form.field.ComboBox',
xtype: 'combocheckbox',
fieldLabel: 'Status',
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" {checked} />', '{text}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: ['text', 'value', {
name: 'checked',
defaultValue: ''
}],
data: [{
text: "All Statuses"
}, {
text: "Not Started"
}, {
text: "In Progress"
}, {
text: "Completed"
}, {
text: "Overdue"
}]
}),
queryMode: 'local',
listeners: {
select: function (combo, rec) {
rec.set('checked', 'checked');
},
beforedeselect: function (combo, rec) {
rec.set('checked', '');
}
}
});
Ext.define('GridStore', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: [{
name: 'issue',
mapping: 'issuetype',
convert: function (v) {
return v.toLowerCase();
}
}],
proxy: {
type: 'ajax',
url: 'task.json',
reader: {
type: 'json',
rootProperty: 'task'
}
}
});
Ext.create({
xtype: 'grid',
renderTo: Ext.getBody(),
title: 'Demo Grid',
store: {
type: 'gridstore'
},
height: 400,
width: '100%',
tbar: [{
xtype: 'combocheckbox',
listeners: {
select: function (combo, rec) {
var store = combo.up('grid').getStore();
store.clearFilter();
if (rec.get('text').toLowerCase() !== 'all statuses') {
store.filter('issue', rec.get('text').toLowerCase());
}
}
}
}],
columns: [{
text: 'Status',
width: 120,
dataIndex: 'issuetype',
renderer: function (value, metaData, record, rowIndex) {
let cls = 'notstarted';
switch (value.toLowerCase()) {
case 'in progress':
cls = 'inprocess';
break;
case 'completed':
cls = 'completed';
break;
case 'overdue':
cls = 'overdue';
break;
}
return `<span class="issuetype ${cls}">${value}</span>`;
}
}, {
text: 'Summary',
flex: 1,
dataIndex: 'summary'
}],
selModel: {
selType: 'checkboxmodel',
mode:'SIMPLE'
}
})
}
});
I made a grid. How I can edit selected row in a modal window using ext js 4? This is my code:
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
renderTo: Ext.getBody()
});
#k_b
Check if this helps you, it is just one first step for you understand the logic.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'surname', type: 'string'},
{name: 'date', type: 'date'}
]
});
var data = {
users: [
{
name: 'Ed Spencer',
surname : 'Jobs'
},
{
name: 'Ed Spencer2',
surname : 'Jobs2'
}
]
};
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
listeners:
{
scope: this,
selectionchange: function(model, records){
var rec = records[0];
if (rec) {
var editform = Ext.create('Ext.form.Panel', {
width: 390,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name: 'surname',
fieldLabel: 'Surname'
}
],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form');
form.updateRecord();
var record = form.getForm().getRecord();
Ext.Msg.alert('Record',record.get('name'));
record.save();
}}]
});
Ext.create('Ext.window.Window', {
title: 'Edit',
height: 200,
width: 400,
layout: 'fit',
items: [
editform]
}).show();
editform.getForm().loadRecord(rec);
}
}
},
renderTo: Ext.getBody()
});
https://jsfiddle.net/ep24cc30/4/
I have a JSFiddle Demo which creates a Grid with editing enabled. The problem I am facing is that the textfields that are displayed when editing a row are too narrow. They are about half the column width.
// Data to be bound to the grid.
var albums = [{
title: 'Frampton Comes Alive!',
artist: 'Peter Frampton',
genre: 'Rock',
year: '01/06/1976'
}, {
title: 'Led Zeppelin II',
artist: 'Led Zeppelin',
genre: 'Rock',
year: '10/22/1969'
}, {
title: 'Queen',
artist: 'Queen',
genre: 'Rock',
year: '07/13/1973'
}];
// Imports
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Models
Ext.define('AlbumManager.model.Album', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
type: 'string'
}, {
name: 'artist',
type: 'string'
}, {
name: 'genre',
type: 'string'
}, {
name: 'year',
type: 'date',
dateFormat: 'm/d/Y'
}]
});
// Stores
Ext.define('AlbumManager.store.AlbumStore', {
extend: 'Ext.data.JsonStore',
storeId: 'albumStore',
model: 'AlbumManager.model.Album',
data: albums,
autoLoad: 'true'
});
// Plugins
Ext.define('AlbumManager.plugin.AlbumEdit', {
extend: 'Ext.grid.plugin.RowEditing',
clicksToMoveEditor: 1,
autoCancel: false
});
// Create view DOM onReady.
Ext.onReady(function () {
// Store
var albumStore = Ext.create('AlbumManager.store.AlbumStore');
var rowEditing = Ext.create('AlbumManager.plugin.AlbumEdit');
var grid = Ext.create('Ext.grid.GridPanel', {
id: 'gridPanel',
title: 'Albums',
width: 400,
height: 200,
renderTo: 'grid-example',
store: albumStore,
columns: [{
header: 'Album Title',
dataIndex: 'title',
flex: 1,
editor: {
width: 300,
allowBlank: false
}
}, {
header: 'Artist',
dataIndex: 'artist',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Genre',
dataIndex: 'genre',
width: 60,
editor: {
allowBlank: true
}
}, {
header: 'Year',
dataIndex: 'year',
width: 60,
editor: {
xtype: 'datefield',
allowBlank: true
},
renderer: Ext.util.Format.dateRenderer('M Y')
}],
plugins: [rowEditing],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Add New Album',
handler: function () {
// Create a model instance
var r = Ext.create('AlbumManager.model.Album', {
title: 'New Album',
artist: 'New Artist'
});
albumStore.insert(0, r);
rowEditing.startEdit(0, 0);
},
disabled: false
}, {
xtype: 'button',
text: 'Delete Album',
handler: function () {
Ext.MessageBox.confirm('Delete', 'Are you sure ?', function (btn) {
if (btn === 'yes') {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
albumStore.remove(sm.getSelection());
if (albumStore.getCount() > 0) {
sm.select(0);
}
}
});
},
disabled: false
}]
}]
});
});
In your fiddle you use javascript from Ext JS 4.2.0 version but CSS from Ext JS 4.0.2a version.
You always should use javascript files and CSS from same version of Ext JS framework. Otherwise you can get unexpected results as you can see in your fiddle.
When I setup your fiddle with javascript and CSS from Ext JS 4.2.1 version, everything works without problems: https://fiddle.sencha.com/#fiddle/3ft
I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.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;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// 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 are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// 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 createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// 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: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
i got an ExtJS Grid in my view and now i do want to add some column filters...
i've already searched in the web, though i didnt succeed.
The problem is if i open the submenu of the column where i can sort etc. i do not see the option Filter.
the following code is a section of my view script:
Ext.define('Project.my.name.space.EventList', {
extend: 'Ext.form.Panel',
require: 'Ext.ux.grid.FiltersFeature',
bodyPadding: 10,
title: Lang.Main.EventsAndRegistration,
layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
...
{
xtype: 'gridpanel',
title: '',
store: { proxy: { type: 'direct' } },
flex: 1,
features: [filtersCfg],
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Title',
text: Lang.Main.CourseTitle,
flex: 1,
filterable: true
},
{
xtype: 'datecolumn',
dataIndex: 'StartDate',
text: Lang.Main.StartDate,
format: Lang.Main.DateFormatJS,
flex: 1,
filter: { type: 'date' }
},
{
xtype: 'datecolumn',
dataIndex: 'EndDate',
text: Lang.Main.EndDate,
format: Lang.Main.DateFormatJS,
flex: 1, // TODO: filter
},
{
xtype: 'gridcolumn',
dataIndex: 'Participants',
text: Lang.Main.Participants,
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'LocationName',
text: Lang.Main.Location,
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'Status',
text: Lang.Main.Status,
flex: 1, // TODO: filter
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
icon: 'Design/icons/user_add.png',
text: Lang.Main.RegisterForEvent,
disabled: true
},
{
icon: 'Design/icons/user_delete.png',
text: Lang.Main.Unregister,
disabled: true
},
{
icon: 'Design/icons/application_view_list.png',
text: Lang.Main.Show,
disabled: true
},
{
icon: 'Design/icons/calendar_edit.png',
text: Lang.Main.EditButtonText,
hidden: true,
disabled: true
},
{
icon: 'Design/icons/calendar_add.png',
text: Lang.Main.PlanCourse,
hidden: true
}]
}]
}
]
});
me.callParent(arguments);
...
this.grid = this.query('gridpanel')[0];
this.grid.on('selectionchange', function (view, records) {
var selection = me.grid.getSelectionModel().getSelection();
var event = (selection.length == 1) ? selection[0] : null;
var registered = event != null && event.data.Registered;
me.registerButton.setDisabled(registered);
me.unregisterButton.setDisabled(!registered);
me.showButton.setDisabled(!records.length);
me.editButton.setDisabled(!records.length);
});
}
});
here is also a pastebin link of the code : http://pastebin.com/USivWX9S
UPDATE
just noticed while debugging that i get an JS error in the FiltersFeature.js file in this line:
createFilters: function() {
var me = this,
hadFilters = me.filters.getCount(),
grid = me.getGridPanel(),
filters = me.createFiltersCollection(),
model = grid.store.model,
fields = model.prototype.fields,
Uncaught TypeError: Cannot read property 'prototype' of undefined
field,
filter,
state;
please help me!
There are a couple of syntactic errors.
FiltersFeature is a grid feature and not a component.
You cannot extend an object literal (correct me if I'm wrong)
Use the filter like this:
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'numeric',
dataIndex: 'id'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
features: [filtersCfg]
});