Here my code:
Store:
Code:
Ext.define('MyApp.store.MyProductStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Product'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.Product',
remoteSort: true,
storeId: 'MyDirectStore1',
proxy: {
type: 'direct',
directFn: Actions.PSCBackendPortal_Product.getProductList,
reader: {
type: 'json',
root: 'rows',
totalProperty: 'results'
}
},
sorters: {
property: 'title'
}
}, cfg)]);
}
});
Grid:
Code:
Ext.define('MyApp.view.MyProduct', {
extend: 'Ext.grid.Panel',
alias: 'widget.MyProduct',
height: 250,
width: 543,
title: 'Produkte',
forceFit: true,
store: 'MyProductStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'uid',
text: 'Id'
},
{
xtype: 'booleancolumn',
dataIndex: 'active',
text: 'Aktiv?',
falseText: 'Nein',
trueText: 'Ja'
},
{
xtype: 'gridcolumn',
filter: {
type: 'string'
},
dataIndex: 'title',
text: 'Title'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 400,
displayInfo: true
}
],
selModel: Ext.create('Ext.selection.RowModel', {
})
});
me.processMyProduct(me);
me.callParent(arguments);
},
processMyProduct: function(config) {
console.log(config);
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: false // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
};
config.features = [filters];
}
});