PDA

View Full Version : How to use Controller to load view from Tab Panel Item



arandlett
3 Jun 2011, 2:44 PM
I have a in my MVC app a Tab Panel loaded for my view port. How do I use my controllers to [load,control] views for each tab?

jmclem
4 Jun 2011, 5:41 AM
hi,

is this tabpanel.setActiveItem(viewInstance) you're looking for?

Jean-Marie.

arandlett
4 Jun 2011, 7:54 AM
I need to be able to use a controller which controls loading of list and detail view. If I just load a view it doesn't have logic to control list selection and loading the detail page. I am trying to stay within the MVC architecture to keep Model, Controller & View separate.

jmclem
4 Jun 2011, 8:32 AM
ok, then you'll need to register your controller for events coming from your view. Upon events (e.g. itemTap), you will - within your controller - call the setActiveItem to swith to the corresponding view.

See on Vimeo the video from Tommy Maintz about the MVC: http://vimeo.com/17705448

HTH,

Jean-Marie.

arandlett
4 Jun 2011, 6:16 PM
In the viewport.js on the video they are loading defaultUrl to the specific controller. I am initiating a TabPanel in the viewport.js. So for each tab's xtype do I call the controller (which doesn't seem to work) or the view? I appreciate your help thank you.

arandlett
6 Jun 2011, 7:52 AM
The app first loads Viewport.js. The viewport is a tabpanel with each tab calling a view.

The list view:


MonkMobile.views.MediaListPanel = Ext.extend(Ext.Panel,{
layout:'fit',
id:'medialist',
initComponent: function(){
this.store = new Ext.data.Store({
autoLoad: true,
model: 'Media',
sorters: ['title']
});

this.dockedItems = [{
xtype: 'toolbar',
dock:'top',
title: 'Media'
}];

this.list = new Ext.List({
itemTpl: '{title}',
store: this.store,
grouped:false,
indexBar:false,
listeners: {
itemTap: function(list,index,item,e){
Ext.dispatch({
controller: 'Media',
action: 'show',
scope:this,
record:this.store.getAt(index)
});
}
}

});

this.items = [this.list];

MonkMobile.views.MediaListPanel.superclass.initComponent.apply(this,arguments);
//this.enableBubble('selectionchange');

}
});

Ext.reg('media-listpanel', MonkMobile.views.MediaListPanel);


when user taps list item it dispatches event to controller "Media" function "Show". Here is where the issue is. I can render the detail page but it adds it as another tab instead of loading as the detail page for the list. I have tried to use setActiveItem however continue to get errors with this.

This is the controller:


Ext.regController("Media", {
show: function(options) {
var details = this.render({
xtype: 'media-detail',
data: options.record.data,
listeners: {
deactivate: function(details) {
details.destroy();
}
}
});
this.application.viewport.setActiveItem(details, {
type: 'slide',
direction: 'left'
});
}
});


How do I get the detail page to load with animation not adding it as another tab?

siebmanb
4 Oct 2011, 8:53 AM
Up !

The question makes sense, a little help would be appreciated please.

From what I have read, Sencha Touch v2 will have a clean MVC way of handling TabPanel... Maybe we just have to wait (end of oct 2011 apparently).