actioncolumn and mvc in ExtJs
How to perform View-Controller separation when using an “actioncolumn” http://stackoverflow.com/questions/12716675/how-to-perform-view-controller-separation-when-using-an-actioncolumn-ext-grid
HTML
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
JavaScript
/******************
THE VIEW
******************/
Ext.define('MyApp.view.Test', {
extend: 'Ext.grid.Panel',
title: 'Action Column Demo',
alias: 'widget.testpanel',
store: Ext.create('Ext.data.Store', {
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [
{
firstname: "Michael",
lastname: "Scott"},
{
firstname: "Dwight",
lastname: "Schrute"},
{
firstname: "Jim",
lastname: "Halpert"},
{
firstname: "Kevin",
lastname: "Malone"},
{
firstname: "Angela",
lastname: "Martin"}
]
}),
columns: [
{
text: 'First Name',
dataIndex: 'firstname'},
{
text: 'Last Name',
dataIndex: 'lastname'},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/icons/fam/cog_edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemeditbuttonclick".
// By the way "this" refers to actioncolumn. That's why we have to do "up('grid')"
this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
}},
{
icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemdeletebuttonclick"
this.up('grid').fireEvent('itemdeletebuttonclick', grid, rowIndex, colIndex);
}}]}
],
initComponent: function() {
// register custom events
this.addEvents('itemdeletebuttonclick', 'itemeditbuttonclick');
this.callParent(arguments);
}
});
/******************
THE CONTROLLER...