ExtJS5 Web Desktop Sample: Unable to fire event from controller - extjs

Question

I have been working with web desktop example in ExtJS5. The example has static data and no events. I wanted to implement a click event on 'Remove Something' button on grid window. Here is my modified code:
Ext.define('SampleApp.view.main.GridWindow', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
init: function () {
this.launcher = {
text: 'Grid Window',
iconCls: 'icon-grid'
};
},
controller: 'gridwindow',
createWindow: function () {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if (!win) {
win = desktop.createWindow({
id: 'grid-win',
title: 'Grid Window',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: mock.view.main.GridWindow.getDummyData(),
columns: [{ xtype: 'rownumberer', sortable: false, text: "S.N.", width: 70 }, {
id: 'topic',
text: "Topic",
dataIndex: 'gridTopic',
flex: 1,
align: 'center'
}, {
text: "Author",
dataIndex: 'gridAuthor',
flex: 1,
align: 'center',
sortable: true
}, {
text: "Replies",
dataIndex: 'gridReplies',
align: 'center',
flex: 1,
sortable: true
}, {
id: 'last',
text: "Last Post",
dataIndex: 'gridLastPost',
flex: 1,
align: 'center',
sortable: true
}]
}
],
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add'
}, '-', {
text: 'Options',
tooltip: 'Modify options',
iconCls: 'option'
}, '-', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove',
listeners: {
click: 'onDeleteClick'
}
}]
});
}
return win;
},
statics: {
getDummyData: function () {
var _store = Ext.create('Ext.data.Store', {
fields: [
{ name: 'gridId', type: 'int' },
{ name: 'gridTopic', type: 'string' },
{ name: 'gridAuthor', type: 'string' },
{ name: 'gridReplies', type: 'string' },
{
name: 'gridLastPost', type: 'date', convert: function (value) {
var _date = new Date(value);
return Ext.Date.format(_date, "Y-m-d H:i:s");
}
}
]
});
var _responseText;
Ext.Ajax.request({
async: false,
url: 'http://localhost/sampleapp/getusers',
method: 'GET',
success: function (resp) {
_responseText = Ext.decode(resp.responseText);
_store.loadData(_responseText);
}
});
return _store;
}
}
});
I am unable to handle 'onDeleteClick' event inside the controller. Here is the controller definition:
Ext.define('SampleApp.view.main.GridWindowController', {
extend: 'Ext.app.ViewController',
alias: 'controller.gridwindow',
onDeleteClick: function (button, evt) {
alert('Clicked');
}
});
Can someone point out the mistake. How can this event be handled?

Answer 1

Ext.ux.desktop.Module does not accept controller config option.
Use your controller on an Ext.Component — in your case either the grid or the window.