PDA

View Full Version : Call viewport method from controller



K4T
27 Apr 2012, 1:53 AM
Hello. How can I call method declared inside my Viewport.js from controller which including that view? I really want to avoid using Ext.getCmp function to get access to component which is created inside viewport.

Viewport.js:


Ext.define('ToDo.view.Viewport', {
extend: 'Ext.container.Viewport',


requires: [
'ToDo.view.todo.List'
],


layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},


initComponent: function() {
this.items = {
items: [
this.buildToDoGridPanel()
]
};


this.callParent();
},


buildToDoGridPanel: function() {
return {
xtype: 'todolist',
itemId: 'toDoList',
id: 'toDoList',
width: 500
}
},


getToDoList: function() {
return this.getComponent('toDoList');
}
});


It would be nice if I could use getToDoList() inside my controller instead of ugly list = Ext.getCmp('toDoList') which require unique ID for each element on page. How can I achieve that?

My controller:


Ext.define('ToDo.controller.ToDos', {
extend: 'Ext.app.Controller',


stores: ['ToDos'],
models: ['ToDo'],
views: ['todo.List'],


refs: [{
ref: 'ToDo',
selector: '#toDoTextField'
}, {
ref: 'DueDate',
selector: '#dueDateField'
}],


init: function() {
...
},


onDeleteClick: function()
{
var store = Ext.getStore('ToDos'),
list = Ext.getCmp('toDoList'), //BAAAAAAAD!
selections = list.getSelectionModel().getSelection();
},


});

vietits
27 Apr 2012, 2:29 AM
Try this


Ext.define('ToDo.controller.ToDos', {
extend: 'Ext.app.Controller',


stores: ['ToDos'],
models: ['ToDo'],
views: ['todo.List'],


refs: [{
ref: 'ToDo',
selector: '#toDoTextField'
}, {
ref: 'DueDate',
selector: '#dueDateField',
}, {
ref: 'viewport',
selector: 'viewport'
}],


init: function() {
...
},


onDeleteClick: function()
{
var store = Ext.getStore('ToDos'),
// list = Ext.getCmp('toDoList'),
list = this.getViewport().getToDoList(),
selections = list.getSelectionModel().getSelection();


},


});

K4T
27 Apr 2012, 3:01 AM
Still not working. Here are my console.logs:


list = this.getViewport();
console.log(list);


Log from Google Chrome console:
constructor


allowDomMove: false
autoGenId: true
componentCls: "x-container"
componentLayout: constructor
componentLayoutCounter: 3
container: constructor
el: constructor
events: Object
hasListeners: HasListeners
height: 374
id: "ext-comp-1009"
initialConfig: Object
items: constructor
lastBox: Object
layout: constructor
layoutCounter: 3
loader: null
mons: Array[0]
protoEl: null
renderData: Object
renderSelectors: Object
renderTo: constructor
rendered: true
stateEvents: Array[0]
stateId: undefined
width: 1280
__proto__: TemplateClass
And method this.getViewport().getToDoList() is undefined.

vietits
27 Apr 2012, 5:05 AM
What is $className if you expand __proto__: TemplateClass in the Chrome console? Also check to see if there is getTodoList in the list of methods when you expand this node.
How do you use ToDo.view.Viewport?

K4T
27 Apr 2012, 5:31 AM
Here is next log from console:

__proto__: TemplateClass

$className: "ToDo.view.Viewport"
HasListeners: function () {}
buildToDoGridPanel: function () {
config: Ext.Object.classify.objectClass
configMap: TemplateClass
getToDoList: function () {

$name: "getToDoList"
$owner: function constructor() {
arguments: null
caller: null
length: 0
name: ""
prototype: Object
__proto__: function Empty() {}

initComponent: function () {
initConfigList: Array[0]
initConfigMap: Object
layout: Object
requires: Array[1]
self: function constructor() {
superclass: TemplateClass
__proto__: TemplateClass

So $className is ToDo.view.Viewport and there is a function getToDoList. Weird that is undefined where I try to call it.

How do you use ToDo.view.Viewport?

Hmm if I understand your question correct here is the answer: The viewport is autocreated by main application class:

App.js


Ext.onReady(function(){

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
name: 'ToDo',
autoCreateViewport: true,
appFolder: 'assets/app',

controllers: [
'ToDos'
]
});
});

vietits
27 Apr 2012, 6:32 AM
It's strange!
I have try to simulate your case with the following example and it works well. Run with Ext 4.0.7, Chrome 18
1. Application


Ext.application({
name: 'AM',
autoCreateViewport: true,
controllers: [
'Main'
]
});

2. Controller


Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',


refs: [{
ref: 'viewport',
selector: 'viewport'
}],


init: function() {
this.control({
'panel toolbar button':{
click: function(){
this.getViewport().getToDoList();
}
}
});
},
});

3. Viewport


Ext.define('AM.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Border Layout',
tbar : [{
text: 'Click Me'
}]
}],
getToDoList: function(){
console.log('reach here')
}
});

K4T
27 Apr 2012, 10:20 AM
Thank you for your time! Now everything works great. I have 'undefined' inside logs because this.getComponent('ToDoList') couldnt find component. Why? Because I had errors inside init fuction of Viewport.js. Working version of that function:

Viewport.js

initComponent: function() {
this.items = [
this.buildToDoGridPanel()
];


this.callParent();
},


One more time: thank you.