PDA

View Full Version : Question about loading a view from modular Controller



prd0000
29 Nov 2012, 1:16 AM
Hi,
Sorry if this is like another stupid question, but I am a newbie here and trying to create my first app.
I have security based menu, which then generate module list based on user's allowed modules.
So, to cut to the chase, here is my app.js




Ext.application({
name:'My',
autoCreateViewport:true,
controllers: ['main.Menu']
});


function forbidden() {
Ext.Msg.alert("Access", "Please login to access this system", function() {
location.href = "/";
})
}



and this is my main.Menu controller:


Ext.define('My.controller.main.Menu', {
extend: 'Ext.app.Controller',
views: ['Toolbar'],
loadModule: function (module) {
var controller = this.getController(module);
controller.init();
},
init: function () {
Ext.Ajax.request({
url: '/system/menu',
success: function (response) {
var items = Ext.decode(response.responseText);
var toolbar = Ext.getCmp('masterToolbar');
toolbar.add(items);
},
failure: function (response) {
if (response.status == 403) {
forbidden();
}
}
});
this.control({
'masterToolbar *': {
click: function (item) {
if (item.itemId) {
this.loadModule(item.itemId);
}
}
}
})
}
})

ExtJS indeed load my controller, but didn't do init, so I did it manually at my main controller.
And this is an example of what my menu json looks like:


[{
"text":"Marketing",
"menu":{
"items":[
{
"text":"Jadwal Meeting Room",
"itemId":"marketing.room.Meeting"
}
]
}
}, {
"text":"Master",
"menu":{
"items":[
{
"text":"Daftar Kontak",
"itemId":"master.Contact"
}
]
}
}]

Now this is my module's controller. I put here my master.Contact controller:


Ext.define('My.controller.master.Contact', {
views: ['master.Contact'],
init: function () {
var win = Ext.create('Ext.window.Window', {
alias: 'widget.masterContact',
title: 'Contact list',
width: 500,
height: 400,
layout: 'border'
}) win.show();
}
})



and my view:


Ext.define('My.view.master.Contact', {
extend: 'Ext.window.Window',
xtype: 'masterContact',
title: 'Contact list',
width: 500,
height: 400,
layout: 'border',
initComponent: function () {
this.show();
}
})

and I can see that the browser load this controller, but it doesn't load the view My.view.master.Contact.
I've tried to create the window manually like the controller above, and it was working when I called init().
But it doesn't load the view. Also, can someone please help me on displaying that view when it is loaded.

I also considering to load all relevant controllers on Ext.application, but I don't know how to do that. Should I generate app.js from PHP file? Can someone please point me to the right direction?


Thank you

mitchellsimoens
30 Nov 2012, 2:25 PM
Most likely it would perform better to have everything load at startup.

prd0000
16 Dec 2012, 1:57 AM
Thanks.. that solved my problem :D