Cannot generate view with MVC

[RyanPays]

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]

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]

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.