I created a MyApp application with Sencha CMD and ExtJS 5.1. Now im changing the Main.js
and MainController.js
files. Only i want to update the center region
tabs clicking in one section of the treepanel in the west region
.
To do this i use a listener who calls the function handleClick()
in MainController.js
but not recognize this function. in MainController.js
exists anothers function, i created a button to execute the onClickButton()
function and works correctly. What im doing wrong?
Main.js
/**
* This class is the main view for the application. It is specified in app.js as the
* "autoCreateViewport" property. That setting automatically applies the "viewport"
* plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('MyApp.view.main.Main', {
extend : 'Ext.container.Container',
requires : [
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel'
],
xtype : 'app-main',
controller : 'main',
viewModel : {
type : 'main'
},
layout : {
type : 'border'
},
items : [{
xtype : 'treepanel',
bind : {
title : 'Menu'
},
region : 'west',
root : {
text : 'Raiz',
expanded : true,
children : [{
text : 'Opcion 1',
leaf : false,
children: [{
text : 'Opcion 1-1',
leaf : true
}]
}, {
text : 'Opcion 2',
leaf : true
}, {
text : 'Opcion 3',
leaf : true
}
],
},
listeners: {
itemclick: function (node, rec){
var id = rec.get("id");
var name=rec.get('text');
console.log('id'+id+' texto: ' + name);
this.handleClick(name);
}},
scope: 'controller',
width : 250,
split : true,
}, {
region : 'center',
xtype : 'tabpanel',
items : [{
title : 'Tab 1',
html : '<h2>Content appropriate for the current navigation.</h2>'
},
{
title : 'Tab 2',
html : '<h2>Content appropriate for the current navigation.</h2>'
},
{
title : 'Tab 3',
html : '<h2>Content appropriate for the current navigation.</h2>'
}
]
}
]
});
MainController.js
/**
* This class is the main view for the application. It is specified in app.js as the
* "autoCreateViewport" property. That setting automatically applies the "viewport"
* plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
requires : [
'Ext.window.MessageBox'
],
alias : 'controller.main',
onClickButton : function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm : function (choice) {
if (choice === 'yes') {
//
}
},
handleClick : function (name) {
var tab = Ext.ComponentQuery.query('tabpanel')[0];
var num = 0;
switch (name.trim()) {
case "Opcion 1":
num = 0;
break;
case "Opcion 2":
num = 1;
break;
case "Opcion 3":
num = 2;
break;
default:
break;
}
tab.setActiveTab(num);
}
});
When i update MainController.js Sencha CMD show this:
[INF] -----------------------
[INF] Waiting for changes...
[INF] -----------------------
[INF] Appending content to C:\xampp\htdocs\MyApp/bootstrap.js
[INF] Writing content to C:\xampp\htdocs\MyApp/bootstrap.json
[INF] merging 219 input resources into C:\xampp\htdocs\MyApp\build\development\MyApp\resources
[INF] merged 0 resources into C:\xampp\htdocs\MyApp\build\development\MyApp\resources
[INF] merging 0 input resources into C:\xampp\htdocs\MyApp\build\development\MyApp
[INF] merged 0 resources into C:\xampp\htdocs\MyApp\build\development\MyApp
[INF] writing sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] appending sass content to C:\xampp\htdocs\MyApp/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
[INF] executing compass using system installed ruby runtime unchanged MyApp-all.scss
[INF] Refresh complete in 4 sec. at 11:23:13 AM
[INF] -----------------------
[INF] Waiting for changes...
Instead of:
listeners: {
itemclick: function (node, rec){
var id = rec.get("id");
var name=rec.get('text');
console.log('id'+id+' texto: ' + name);
this.handleClick(name);
}},
scope: 'controller',
write:
listeners: {
itemclick: function (node, rec) {
var id = rec.get("id");
var name=rec.get('text');
console.log('id'+id+' texto: ' + name);
this.handleClick(name);
},
scope: 'controller'
},