PDA

View Full Version : Reference lost



Matthias Vance
29 Sep 2012, 10:58 AM
I have the following minimal test case set up:
http://jsfiddle.net/n3gh4/2/

The following error occurs on assigning the handler for the "Add" button:
TypeError: this.controller is not defined

If you change `controllers: ["Main"]` to `controllers: ["Data"]` on the last line of code it magically works.

I appreciate any help regarding fixing this.

PS:
I just visited the URL again, and it worked. If this happens to you, try changing the controllers collection back and forth, you will get the error again.

vietits
29 Sep 2012, 4:19 PM
See my fix of your code in red color below:


Ext.define("foo.view.Main", {
extend: "Ext.tab.Panel",
initComponent: function () {
// Configuration
Ext.apply(this, {
renderTo: Ext.getBody(),
items: [
this.controller.getDataView()
]
});
// Parent
this.callParent();
}
});


Ext.define("foo.controller.Main", {
extend: "Ext.app.Controller",
views: ["Main"],
init: function () {
Ext.create("Ext.container.Viewport", {
layout: "fit",
items: this.getView("Main").create({ controller: this })
});
},
getDataView: function () {
var dataController = this.getController("Data");
dataController.init();
return dataController.getView("Data").create({controller: dataController}); // need to pass controller to creating Data view
}


});


Ext.define("foo.view.Data", {
extend: "Ext.grid.Panel",
title: "Addresses",
addText: "Add",
// renderTo: Ext.getBody(), <- no need because Data view will be rendered as child of Main view
initComponent: function () {
// Configuration
Ext.apply(this, {
columns: [
{
header: "Id",
dataIndex: "Id",
hidden: true
},
{
header: "Uid",
dataIndex: "Uid",
hidden: true
},
{
header: "Mail",
dataIndex: "Mail"
}
],
dockedItems: [
{
xtype: "toolbar",
dock: "top",
items: [
{
text: this.addText,
handler: this.controller.Add
}
]
}
]
});
// Parent
this.callParent();
}
});


Ext.define("foo.controller.Data", {
extend: "Ext.app.Controller",
views: [
"Data"
],
init: function () {
// this.getView("Data").create({ controller: this }); <- no need because Data view will be rendered as child of Main view, not as standalone
},
Add: function () {
alert("Add");
}
});


Ext.application({
name: "foo",
controllers: [
"Main"
]
});
?

Matthias Vance
30 Sep 2012, 12:00 AM
Ahh, thanks a lot for the quick reply.

I totally overlooked the fact I was instantiating it twice, without giving it a reference to the controller.
Everything else you found was added as part of debugging.

My problem is resolved, thanks again!