PDA

View Full Version : MVC 3 views in 1 controller



Ooypunk
16 Oct 2011, 1:18 PM
3 views in 1 controller, is this possible? Because I feel it would be a waste of resources to make a new controller for every view.
What I want to do is make some kind of file 'Explorer', so I need a left frame (1 view) and a centre frame (1 view) in one container frame (1 view). But I don't know how to do this; if possible, how does one call the other views?
This is what I have now:

Ext.define('TB.view.bestand.Main' ,{
extend : 'Ext.panel.Panel',
alias : 'widget.bestandMain',

layout : 'border',
title : 'Bestanden',
iconCls : 'bestanden',
items : [
{
region : 'west',
id : 'bestandenTree',
title : 'Mappen',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
html: 'Bogus markup west-panel'
},
{
region : 'center',
id : 'bestandenMain',
title : 'Inhoud',
html : 'Bogus markup centre panel'
}
]
});

slemmon
16 Oct 2011, 1:24 PM
You might check out the MVC guide. It has some examples in there where it has a controller with more than one view referenced in it.
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture


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


views: [
'user.List',
'user.Edit'
],


init: ...


editUser: function(grid, record) {
var view = Ext.widget('useredit');


view.down('form').loadRecord(record);
}
});
(http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture)

Ooypunk
16 Oct 2011, 1:48 PM
Yes, I know, I use this way also in another window of my app. But in your example the other view is included in the one controller, and that's not what I mean: I want to include a view in another view.

rvaibhav
16 Oct 2011, 9:43 PM
I'm assuming that viewport is your container view. You have two panels horizontally aligned in center region.





Ext.define('....'{
.
.
.
items:[
{
region:'center',
items:[
{
itemId:'item1PlaceHolder',
flex:1
},
{
itemId:'item2PlaceHolder',
flex:1
}

]

}
]

})

In your controller this.control({..}) method attach event handler to the item1 view button/link and dynamically add item2view in the placeholder panel using panel add method.
I prefer creating XTemplate for item2view and place it in item2PlaceHolder panel and only load store with updated data as and when required.

lucasguaru
17 Oct 2011, 3:03 AM
You can create a controller for you parent panel(bestandMain) and control all the panels from there using:


this.control({
'bestandMain' : {
afterrender : function(thisGrid) {
...
},
expand : function(thisGrid){
...
}
},
'bestandMain > panel[id=bestandenTree]' : {
containerkeydown : function() {
...
}
},
'bestandMain > panel[id=bestandenMain]' : {
containerkeydown : function() {
...
}
}
});
You can go from bestandenMain to bestandMain using 'up' or you can go 'down'.

ferengidedalo
17 Oct 2011, 3:38 AM
I dont understand why you feel a "waste of resources" making a controller per view... I have been developing large mvc apps using ext and each code organization and reuse is improved using just one controller per view...

Ooypunk
17 Oct 2011, 7:29 AM
I dont understand why you feel a "waste of resources" making a controller per view... I have been developing large mvc apps using ext and each code organization and reuse is improved using just one controller per view...Because these controllers would be doing nothing but define the xtype for their respective view. And I don't think I'll be using these panels/views in another place.