PDA

View Full Version : button click event is not calling controller init in EXTJS 4 web desktop



jitesh_biswal
21 Feb 2013, 10:55 AM
I am trying to create MVC in the web desktop example of the extjs 4, Where should i put my controller reference in CcHierarchy.js , so that controller button click event will be called?


desktop.jsp



Ext.Loader.setPath({
'Ext.ux.desktop': '${pageContext.request.contextPath}/scripts/extjs4.1.1a/desktop/js',
MyDesktop: '${pageContext.request.contextPath}/scripts/extjs4.1.1a/desktop'
});

Ext.require('MyDesktop.App');

//alert(MyApp.global.Vars.IMG_PRE_PATH);
var myDesktopApp;

Ext.onReady(function () {
myDesktopApp = new MyDesktop.App();

});





CcController.js

Ext.define('MyDesktop.CcController', {
extend: 'Ext.app.Controller',


init: function() {
alert('Hi');
this.control({
//Component listeners
'button': {
//type of event to be caught
click:function(){
alert('a button has been clicked');
}
}
});
this.application.on({
//Event handlers

});

}




});



CCHierarchy.js

Ext.define('MyDesktop.CCHierarchy', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
'MyDesktop.CcController'
],

id:'cc-tree',

init : function(){
this.launcher = {
text: 'Cost Center Hierarachy launcher',
iconCls:'icon-grid'

};

},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('cc-tree');

if(!win){
win = desktop.createWindow({
id: 'cc-tree',
title:'Cost Center Hierarachy Window',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,

layout: 'border',
items: [{
region: 'north',
xtype: 'tabpanel',
height: 100,


items: [{
title: 'Cost Center Details',
html: 'Please Note: Cost Center hierarchy is as of prior month-end',
closable: false,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: ''
}],
buttons: [{
text: 'Search',
layout: 'anchor',
id: 'cc-submit-button'
}]
}]
},{
region: 'west',
title: 'Cost Center Hierarchy Navigation',
width: 300,
height: 300,
split: true,
collapsible: true,
floatable: false,
store: Ext.create('MyDesktop.CCStore',{}),
hideHeaders: true,
rootVisible: true,
xtype: 'treepanel',
id: 'CostCenterHierarchyNavigation'


}, {
region: 'center',
xtype: 'tabpanel',
height: 300,
items: [{
title: 'Cost Center Details',
closable: false,


items: [{
xtype: 'displayfield',
id:'CCName',
fieldLabel: 'Cost Center Name:',
name: 'CostCenterName',
value: ''
},{
xtype: 'displayfield',
id:'BU',
fieldLabel: 'Business Unit:',
name: 'BusinessUnit'
},{
xtype: 'displayfield',
id:'DVN',
fieldLabel: 'Division',
name: 'Division'
},{
xtype: 'displayfield',
id:'FM',
fieldLabel: 'Finanace Manager',
name: 'FinanaceManager'
},{
xtype: 'displayfield',
id:'CFOID',
fieldLabel: 'CFO',
name: 'CFO'
}],
buttons: [{
text: 'Select',
layout: 'anchor'
}]


}]
}],
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'
}]
});
}
return win;
}


});

scottmartin
21 Feb 2013, 2:35 PM
Somethings like this:

// controller


init : function () {
var me = this;

me.control({
'myapp-user-list' : { // grid events
selectionchange : me.showUser,
removeitem : me.deleteUser,
itemdblclick : me.toggleForm,
boxready : function (grid) {
grid.getSelectionModel().select(0);
}
},

'myapp-user-list button[action=addUser]' : { // button action
click : me.addUser
}

});
},


Scott.

juger
21 Feb 2013, 2:41 PM
You can also put the handler for a button right in the view itself and call the controller from there


Ext.define('Test.view.TestView', { extend: 'Ext.Panel',
height: 300,
width: 600,
items: [{
xtype: 'button',
text: 'do something',
handler: function() {
this.application.getController('ControllerName').doSomething();
}
}]

});

evant
21 Feb 2013, 10:51 PM
I wouldn't recommend doing that. The controller should know about the view, not the other way around. It pretty much violates the MVC architecture.

jitesh_biswal
22 Feb 2013, 5:56 AM
Hi evant,
My experience came from as a J2EE expert and completely new to EXTJS MVC pattern. In traditional J2EE MVC pattern controller usually communication component between model and view. However view start the communication , so its view -> controller -> model and then back (model -> controller -> view) . Coming to web desktop example of extjs, it was not written in MVC architecture and i am trying to achive the same.

juger
22 Feb 2013, 12:29 PM
I understand how my specific example breaks MVC by accessing a controller within a view, but does doing any kind of processing in the view break MVC also? Like if instead of calling a controller in my example above, you manipulated data on a store, or changed something in a different view? I ask this because many of the examples I looked at while initially learning ExtJS used that kind of design pattern, by which I mean the examples would have code run in a view.

dawesi
25 Nov 2013, 8:09 AM
if you want to manipulate data in a store, you could do it in a variety of ways within the model or store classes using inbuilt functionalities or custom functions. If you manipulate something in another view you should either call a function in that view to manipulate it, or fire an event, in which the view reacts to (my preference)

As most of the examples where originally ported from v3.x they aren't the best examples of MVC. The new Kitchen sink examples are a lot better, and a community member has MVC'd most of the examples.