1. #1
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    joejernst is on a distinguished road

      0  

    Question Can't get Store to work using MVC pattern

    Can't get Store to work using MVC pattern


    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:24674
    Uncaught 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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    joejernst is on a distinguished road

      0  

    Default I think this may be a bug

    I think this may be a bug


    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?

  4. #4
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    joejernst is on a distinguished road

      0  

    Default Still broken in 2.0.0 pr2

    Still broken in 2.0.0 pr2


    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.

  5. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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'}]
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    joejernst is on a distinguished road

      0  

    Default Still no workey

    Still no workey


    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.
    Last edited by joejernst; 21 Nov 2011 at 11:45 AM. Reason: fixed error message formatting

  7. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Are you sure the Person.js file is in the model/ folder?
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #8
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    joejernst is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Nov 2011
    Location
    León, Spain
    Posts
    77
    Vote Rating
    3
    diesalher is on a distinguished road

      0  

    Default


    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');
        }
    }) ;

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Location
    León, Spain
    Posts
    77
    Vote Rating
    3
    diesalher is on a distinguished road

      0  

    Default


    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