PDA

View Full Version : Cannot generate view with MVC



RyanPays
5 Dec 2012, 11:56 PM
Hi,

I am using the following code for the basis for an Ext JS appllication to receive messages. My wish is to do it in the MVC application architecture but i seem to have got so far but cannot generate an actual View.

Application:


Ext.Loader.setConfig({enabled: true});


Ext.application({
name: 'INFOBAR',
appFolder: '/root/src/scripts/app',
models: ['INFOBAR.model.Message'],
stores: ['INFOBAR.store.Message'],
views: ['INFOBAR.view.Message'],
controllers: ['InfoBar'],
launch: function(){
console.log('application launched');
}
});


JSON data:

{
"data": [{
"id": 1,
"message": "First message",
"timestamp": 1354758001
}, {
"id": 2,
"message": "Second message",
"timestamp": 1354758001
}, {
"id": 3,
"message": "Third message",
"timestamp": 1354758001
}]
}


Model:


Ext.define('INFOBAR.model.Message', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int', convert: null},
{name: 'message', type: 'string', convert: null},
{name: 'timestamp', type: 'int', convert: null}
],
proxy: {
type: 'ajax',
url: '/root/src/scripts/app/app/data/messages.json',
reader: {
type: 'json',
root: 'data'
}
}
});


View:


Ext.define('INFOBAR.view.Message', {
extend: 'Ext.view.View',
alias: 'widget.msgView',
store: 'INFOBAR.store.Message',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<li id="{id}">',
'{message}',
'</li>',
'</tpl>'
),
autoEl: {
tag: 'ul'
},
itemSelector: 'li.msg-view',
emptyText: '<li>No messages to display</li>',
renderTo: Ext.get('msg-cntr')
});


Controller:


Ext.define('INFOBAR.controller.InfoBar', {
extend: 'Ext.app.Controller',
init: function(){
// initialisation code
console.log('controller');
}
});


Store:


Ext.define('INFOBAR.store.Message', {
extend: 'Ext.data.Store',
id: 'INFOBAR.store.Message',
model: 'INFOBAR.model.Message',
requires: ['INFOBAR.model.Message', 'INFOBAR.view.Message'],
autoLoad: true
});


I am unsure why i need the 'requires' in the Store? And principally why the view of messages is not generated?

All appears to be loading fine when using 'requires' and i see the AJAX request within the Model's proxy so am wondering what i have done wrong!

evant
6 Dec 2012, 12:14 AM
I haven't done anything but a cursory glance over it, however:

1) controllers/stores/models shouldn't be prefixed:



models: ['Message'],
stores: ['Message'],
views: ['Message'],


2) You can't use renderTo in the object definition, because it needs to be in an onReady block (or, in this case, launch)

RyanPays
6 Dec 2012, 12:44 AM
Hi,

I updated the app.js file like so:



Ext.application({
name: 'INFOBAR',
appFolder: '/rmwb-push-notification/src/scripts/app/app',
models: ['Message'],
stores: ['INFOBAR.store.Message'],
views: ['Message.List'],
controllers: ['InfoBar'],
launch: function(){
console.log('application launched');
Ext.create('widget.msgList', {
renderTo: 'msg-cntr'
});
}
});


Which works but i cannot remove the INFOBAR.store prefix on the reference to the store.