Code:
Ext.define('MyApp.view.dashboard', {
extend: 'Ext.window.Window',
floating: true,
frame: true,
height: 754,
id: 'dashboard_id',
itemId: 'dashboard',
minHeight: 200,
width: 921,
shadowOffset: 10,
autoScroll: true,
layout: {
type: 'border'
},
collapseFirst: false,
collapsible: true,
title: 'Projects',
maximizable: true,
minimizable: false,
modal: false,
plain: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
region: 'center',
weight: 7,
border: '',
frame: false,
autoScroll: true,
animCollapse: false,
collapsible: false,
frameHeader: false,
header: false,
hideCollapseTool: false,
overlapHeader: false,
title: 'DevelopmentsList',
titleCollapse: false,
columnLines: false,
enableLocking: true,
hideHeaders: false,
scroll: 'vertical',
store: 'MyModels', // correct store
viewConfig: {
autoRender: false,
frame: true,
autoScroll: true,
singleSelect: true,
enableTextSelection: true,
stripeRows: false
},
listeners: {
itemclick: {
fn: me.onGridpanelItemClick,
scope: me
},
select: {
fn: me.select,
scope: me
}
},
items: [
{
xtype: 'pagingtoolbar',
height: 275,
width: 962,
autoScroll: false,
displayInfo: true,
store: 'MyModel'
}
],
features: [
{
ftype: 'grouping'
}
],
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'status',
text: 'Current status'
},
],
dockedItems: [
{
xtype: 'panel',
dock: 'bottom',
height: 187,
itemId: 'detail',
minHeight: 250,
tpl: [
'{whatever} field here from the Grid'
],
width: 781,
layout: {
type: 'border'
},
animCollapse: false,
frameHeader: false,
header: false,
overlapHeader: false,
}
]
},
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
handler: function(button, event) {
Ext.ux.grid.Printer.printAutomatically = false;
Ext.ux.grid.Printer.print(this);
},
iconCls: 'icon-print',
text: 'Print '
}
]
}
]
}
]
});
me.callParent(arguments);
},
onGridpanelItemClick: function(tablepanel, record, item, index, e, options) {
},
select: function(selModel, record, index, options) {
var detailPanel=this.down('#detail');
detailPanel.update(record.data);
}
});