Can't get Store to work using MVC pattern

**joejernst** · 19 Nov 2011 1:27 PM

I am finding it impossible to get a simple MVC application to work if it includes a Store. I keep getting these messages when I include a stores array in the controller:

sencha-touch-all-debug.js:3904[Ext.Loader] Synchronously loading 'mvcPOC.view.person.List'; consider adding Ext.require('mvcPOC.view.person.List') above Ext.onReady

sencha-touch-all-debug.js:24669Store defined with no model. You may have mistyped the model name.

sencha-touch-all-debug.js:24674Uncaught TypeError: Cannot call method 'getProxy' of undefined

Here are my application files:

index.html:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>The Sencha Touch MVC POC</title>

    <link rel="stylesheet" href="../sencha-touch-2.0.0-pr1/resources/css/sencha-touch.css" type="text/css" media="screen"/>
    <script src="../sencha-touch-2.0.0-pr1/sencha-touch-all-debug.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        Ext.Loader.setConfig(
                {
                    enabled: true,
                    paths: {
                        mvcPOC : 'app'
                    }
                }
        );

        Ext.application({
                    name: 'mvcPOC',
                    appFolder: 'app',
                    autoCreateViewport: true,
                    models: ['Person'],
                    controllers: ['Person'],
                    launch: function() {
                        alert('Application Launched');
                    }
                });
    </script>
</head>
<body>
</body>
</html>

app/controller/Person.js:

Code:

Ext.define('mvcPOC.controller.Person', {
    extend: 'Ext.app.Controller',
    views: ['person.List'],
    stores: ['Person'],
    init: function() {
        alert('controller init');
    }
});

app/model/Person.js:

Code:

Ext.define('mvcPOC.model.Person', {
    extend: 'Ext.data.Model',
    config: {
         fields: [
            {name:'firstName', type: 'string'},
            {name:'lastName', type: 'string'}
        ]
    }
});

app/store/Person.js:

Code:

Ext.define('mvcPOC.store.Person',
{
    extend: 'Ext.data.Store',
    config: {
        model: 'Person',
        data: [{firstName: 'John', lastName: 'Doe'}]
    }
});

app/view/person/List.js:

Code:

Ext.define('mvcPOC.view.person.List', {
    extend: 'Ext.Panel',
    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'list',
                flex: 1,
                store: 'Person',
                itemTpl: '<div>{firstName} {lastName}</div>'
            }
        ]
    }
});

app/view/Vieport.js:

Code:

Ext.define('mvcPOC.view.Viewport', {
    extend: 'Ext.Carousel',
    id: 'viewport',
    config: {
        layout: 'card',
        fullscreen: true,
        cardSwitchAnimation: 'slide',
        items: [
            Ext.create('mvcPOC.view.person.List')
        ]
    }
});

What am I doing wrong here? It seems so simple yet I can't get it to work if the stores array is defined.

**mitchellsimoens** · 19 Nov 2011 3:15 PM

First log you are getting is because you are instantiating the mvcPOC.view.person.List class in your mvcPOC.view.Viewport class definition. You should specify it as an xtype and give your List class an alias.

You aren't specifying a proxy on your Store or Model so that's why you are getting the last two but it really shouldn't since a proxy isn't always needed.

**joejernst** · 19 Nov 2011 4:54 PM

I took care of the first message by adding an alias to my view.person.List class.

The only way I can get the app to work with a store is to define it inline with the list view like so:

Code:

Ext.define('mvcPOC.view.person.List', {    
    extend: 'Ext.Panel',
    alias: ['widget.personList'],
    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'list',
                flex: 1,
                store: {
                    xtype: 'store',
                    fields: [
                        {name:'firstName', type: 'string'},
                        {name:'lastName', type: 'string'}
                    ],
                    data: [
                        {firstName: 'John', lastName: 'Doe'}
                    ]
                },
                itemTpl: '<div>{firstName} {lastName}</div>'
            }
        ]
    }
});

My original code used a proxy and gave the same error. I have pared it down to the simplest test case to reproduce the problem. As soon as I try to split the store and/or model out into classes it fails.

Is this a known bug with 2.0.0pr1?

**joejernst** · 21 Nov 2011 8:54 AM

Somehow I never noticed that a pr2 was available, so I downloaded it and tried this same testcase using pr2. It still gives the same results.

**rdougan** · 21 Nov 2011 11:19 AM

The problem is that the Ext.data.* package does not support and new configuration system yet. So anything you define in the config block should just go in the main object:

Code:

Ext.define('mvcPOC.model.Person', {
    extend: 'Ext.data.Model',
	fields: [
		{name:'firstName', type: 'string'},
		{name:'lastName', type: 'string'}
	]
});

Code:

Ext.define('mvcPOC.store.Person', {
    extend: 'Ext.data.Store',
	model: 'Person',
	data: [{firstName: 'John', lastName: 'Doe'}]
});

**joejernst** · 21 Nov 2011 11:43 AM

Thanks for the reply,

I tried that, but now I get this message:

.../supportapi/client/mvcPOC/Person.js?_dc=1321904477114 404 (Not Found)

sencha-touch-all-debug.js:4837Uncaught Error: [Ext.Loader] Failed loading 'Person.js', please verify that the file exists

Do I just need to wait for a pr3+ that has this implemented for the data package? If so, that's OK. I just want to make sure I understand how this is supposed to work.

**rdougan** · 21 Nov 2011 11:44 AM

Are you sure the Person.js file is in the model/ folder?

**joejernst** · 21 Nov 2011 1:38 PM

Yes, that file is there. I have zipped my application and attached it so you can use it as a testcase.

**diesalher** · 23 Nov 2011 4:22 AM

Hi

im a newbie here but i'm working without problems with MVC and Stores...

here is my code if it helps you

index.html

Code:

<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>AppName</title>
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="resources/css/app.css" type="text/css">


    <!-- api de Google maps  . antes de las otras please-->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


    <script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
      


</head>
<body></body>
</html>

app.js

Code:

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


Ext.application({
    name: 'AppName',
    controllers: ['Main','Informacion'],
    models:['Favorite','Warning'] ,
    stores:['Favorites','Warnings'] ,
    launch: function() {
        Ext.create('AppName.view.Viewport');
    }
}) ;

**diesalher** · 23 Nov 2011 7:14 AM

Anyway, i've made the skeleton of a MVC Sencha touch application for you (or anyone) to use..

just add a touch folder with sencha touch 2 pr2

SkeletonApp.zip

Can't get Store to work using MVC pattern

Thread Tools

Search Thread

Display

Can't get Store to work using MVC pattern

Can't get Store to work using MVC pattern

I think this may be a bug

I think this may be a bug

Still broken in 2.0.0 pr2

Still broken in 2.0.0 pr2

Still no workey

Still no workey

Tags for this Thread