PDA

View Full Version : Help going from a single app.js to an MVC structure



nickbalestra
17 Jun 2011, 8:11 PM
Hello, i manage to have the first elements of my sencha touch app workings but code is getting big and want to move it to MVC arch and structure. I've seen this video about it: http://vimeo.com/17705448 but am a little bit lost anyone can help me out?

here my one-single-file app.js code:




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {

// Define the model that we use for the upcoming events,
// this model will be used both for the map view and for the list view

Ext.regModel('Event', {
fields: [
{name: 'id', type: 'string'},
{name: 'venue', type: 'string'},
{name: 'geolocated_city', type: 'string'},
{name: 'header', type:'string'},
{name: 'description', type: 'string'},
{name: 'title', type: 'string'},
{name: 'date', type: 'string'},
{name: 'start', type: 'string'},
{name: 'latitude', type: 'float'},
{name: 'longitude', type: 'float'},
],


proxy: {
type: 'ajax',
url: '../index.php',
reader: {
type: 'json'
},
extraParams: {
option: 'com_foo',
view: 'events',
format: 'json'
},
},
});

// Define a Template that will be used to populate the list view
// the template as a for='.' so that it iterate this for every istance in the store


var itemTemplate = new Ext.XTemplate (
'<tpl for=".">',
'<div class="event">',
'<div class="flyer">',
'<tpl if="header != 0">',
'<img src="../media/thumbs/{header}"/>',
'</tpl>',
'<tpl if="header == 0">',

//TODO - ADD a NO-Flyer img into ohanah media folder to be used

'<img src="icon.png"/>',
'</tpl>',
'</div>',
'<div class="event-content">',
'<h2>{title}</h2>',
'<p>{venue} {geolocated_city}</p>',
'</div>',
'</div>',
'</tpl>'
);

// Define the store

var jsonEventStore = new Ext.data.Store ({
model: "Event",

// Group the result by date - Now using the field 'date' from the model Event,
// TODO need to take the field 'start' and treat is as a type: date //

getGroupString: function(record){
return record.get('date');
},

/* For Testing Purpose on local - to be removed - we can populate some data here in the store

data: [
{ id: 1,
date: '2011-07-01',
title: 'Test Event Local',
venue: 'Club One',
geolocated_city: 'Lugano' }
],
*/

autoLoad: true
});


// Defininf the event list view (panel)

var eventListPanel = {
title: "Events",

items: [
{
xtype: 'list',
scroll: 'vertical',
layout: 'fit',
fullscreen: true,
grouped: true,
indexBar: false,
store: jsonEventStore,
itemTpl:itemTemplate,

onItemDisclosure: function (record) {
//TO DO link here the event view
}
}
]
};

// For testing purpose just define a local position - to be removed
var testposition = new google.maps.LatLng(46.0770413127077, 8.94287109375);


// Define the event map

var eventsMap = new Ext.Map({
title: 'Map',
fullscreen: true,
layout:'fit',
useCurrentLocation: true,
mapOptions: {
zoom: 8,
},
listeners: {
single: true,
delay: 4000,
afterRender: function(){

// Loop after each item on the store to retrieve lat & long for each item
// after each loop use lat&lgt to render a marker on the map

jsonEventStore.each(function(i) {

var lat = i.data.latitude;
var lgt = i.data.longitude;
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lgt));
//console.log(point); FOR Testing purpose, to be removed
var eventmarker = new google.maps.Marker({
position: point,
map: eventsMap.map
});
});
},
},
});


// Define the event map View (panel) that will call the map to be rendered

var mapPanel = new Ext.Panel({
title: 'Map',
fullscreen: true,
layout:'fit',
items:eventsMap
});

// Define the top toolbar that can allow to switch from the two views

var panel = new Ext.TabPanel({
tabBar: {
layout: {
pack: 'center'
}
},
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [eventsMap, eventListPanel],
});
}
});

21 Jun 2011, 6:02 AM
First step is to pull your component apart into separate classes.
second is to bind with MVC.