Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Can't get Store to work using MVC pattern

  1. #1
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Vote Rating
    0
      0  

    Question 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User joejernst's Avatar
    Join Date
    Apr 2009
    Posts
    40
    Vote Rating
    0
      0  

    Default 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
    40
    Vote Rating
    0
      0  

    Default 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 User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      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
    40
    Vote Rating
    0
      0  

    Default 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 User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      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
    40
    Vote Rating
    0
      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 Attached Files

  9. #9
    Sencha User
    Join Date
    Nov 2011
    Location
    Len, Spain
    Posts
    77
    Vote Rating
    3
      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
    Len, Spain
    Posts
    77
    Vote Rating
    3
      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

Page 1 of 3 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •