PDA

View Full Version : Proper use of MVC and Navigation View?



GregSmithRTR
23 Apr 2012, 9:08 AM
I'm following the MVC video from the Sencha Touch docs (http://docs.sencha.com/touch/2-0/#!/video/mvc-part-1), but instead I'm using a Navigation view as my main view.

The first thing I want to show is a carousel of images, which I have working correctly. When the user taps one of the images I want to push a new view to the Navigation. I have the tap listener in the Main.js controller which is being fired (tested with an alert), but I don't know how to get a reference to the Viewport (Navigation view) so I can push a new view to it.

I hope I'm using Sencha's MVC paradigm correctly but handling the tap in a controller and loading a new view via that controller.

App.js

launch: function() {
Ext.create('MyApp.view.Viewport');
}


Viewport.js

Ext.define('MyApp.view.MyCarousel', {
extend: 'Ext.Carousel',
xtype: 'myappcarousel',

config: {
title: 'My App',
items: [
{
xtype: 'image',
src: 'img/culinary.jpg',
id: 'img1',
action: 'loadOverview'
}
]
});



Main.js

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

init: function() {
// Called when the Controller is loaded
this.control({
'img[action=loadOverview]': {
tap: 'loadOverview'
}
});
},

loadOverview: function(img, e, eOpts) {
// HOW DO I PUSH A VIEW TO VIEWPORT?
}
});

SebasSP
24 Apr 2012, 12:23 AM
You can assign a reference to your view in a refs declaration in the controller. This is explained in the Controllers guide:
http://docs.sencha.com/touch/2-0/#!/guide/controllers