OK, so I'm a dummy. Simple MVC Help Please!

**slmckenzie** · 14 Nov 2012 8:28 PM

Back in ST 1.0, I had a great interface that I developed for my Capstone project. Everything worked wonderfully, and I was good to go. Fast forward to a year later, and I am attempting to make a similar, simple interface for a local non-profit organization. However, ST 2.0 has been released, and a number of significant changes have been made. Unfortunately, those changes have confused me, and I've gotten stuck in a rut that I'm not sure how to solve.

Basically, so far I have a simple interface, where the user accesses a homepage (tabpanel), with various different pages (tabs) that he or she can navigate too. I'm only working on the first page so far, which has a backend model / store / view, that takes a set of data from a backend database, returns it in JSON form, parses, and displays on the page. So far, so good. And it's been working!

However, I'm running into a problem where I'm getting the following warning:

[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Blue.store.Animals'; consider adding 'Blue.store.Animals' explicitly as a require of the corresponding class

It's interesting to note that I don't get this error all the time. If I'm REALLY lucky, I won't get the warning, and everything will load and run just fine. If I'm only just slightly lucky, I'll get the warning, but everything will still work fine.

Unfortunately, I may ALSO get the following error in addition to the warning:

Uncaught Error: [ERROR][Ext.data.Store#setModel] Model with name "Blue.model.Animals" does not exist.

This error is a showstopper, and causes it to fail, and nothing will happen. But, by simply refreshing the page, I'll get one of the three above responses: 1) It works fine, 2) It warns and still works, 3) It errors and fails.

Due to the fact that refreshing the same dang page without making any changes to it causes me to get one of three outcomes, makes me think that there's a synchronization issue going on somewhere. But, this is such a simple example, and I'm not doing anything fancy, and yet I STILL can't get it to work!

Here's my code for my model, store, and view. Could someone take a look at it and point me to where I'm going wrong? I've been battling it most of the day, and I'm sure the solution is simple, to someone who has a better idea of what they're doing. But it's killing me!

Store:

Code:

Ext.define('Blue.store.Animals', {    extend: 'Ext.data.Store',
    id: 'animalstore',
    config: {
          model: 'Blue.model.Animals',
          autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'php/json/animal_data.php',
            reader: {
                type: 'json',
                rootProperty: 'animals'
            }
        }
    },
});

Model:

Code:

Ext.define('Blue.model.Animals', {    extend: 'Ext.data.Model',
    config: {
        fields: ['Animal_ID', 'Name']
    }
});

View:

Code:

animalStore = Ext.create('Blue.store.Animals');//animalStore.load();


menuList = Ext.create('Ext.List', {
    title: 'Animalsaaaa',
    useToolbar: Ext.is.Phone ? false : true,
    hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
    toolbar: Ext.is.Phone ? this.navigationBar : null,
    allowDeselect: false,
    singleSelect: true,
    text: 'Animalsssss',
    itemTpl: '{Name}',
    store: animalStore,
    id: 'animalstorelist',
    //autoLoad: true,
});


Ext.define('Blue.view.Animals', {
    extend: 'Ext.Panel',
    alias: 'widget.animals',
    layout: 'vbox',
    title: "Animals View",
    layout: 'fit',
    config: {
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'Animal Administration',
            items: [{
                xtype: 'spacer'
            },{
                xtype: 'searchfield',
                placeHolder: 'Search',
                name: 'searchfield',
                align: 'right'
            },{
                xtype: 'button',
                text: '?',
                name: 'help',
                align: 'right'
            }]
        },{
            xtype: 'panel',
            layout: 'fit',
            width: 300,
            docked: 'left',
            items: [
                menuList,
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Animals',
                items: [{
                    xtype: 'spacer'
                },{
                    xtype: 'button',
                    name: 'add',
                    align: 'right',
                    iconCls: 'add',
                    ui: 'plain',
                    iconMask: true
                }]
            }]
        },{
            xtype: 'panel',
            layout: 'card',
            html: '<p>Blah<br><br><Br><Br><br></p>',
            items: [{
                xtype: 'panel',
                id: 'animalplaceholder',
                cls: 'launchscreen',
                html: '<img src="lib/touch/resources/themes/images/default/pictos/info.png"/><h2><i>Click an animal on the left...</i></h2>',
                height: '100%',
                fullscreen: true
            },{
                xtype: 'panel',
                html: '<p>Teexty Texty</p>'
            }]
        }]
    },
    initialize: function() {
        console.log('initialize animals view');
        this.callParent();
    }
});

Thanks for your help!

Schildi

Hi slmckenzie,

hmm, this is strange.
I quickly created an app-structure, which implements things roughly as you need them. Maybe you can look at this again and compare it to your implementation. Also take care of foldernames etc. (plural s or no plural s).

This version does work

:

File: app.js

Code:

Ext.application({
    name: 'App',

    views: ['Menu'],
    
    stores: ['Animals'],

    launch: function() {
        Ext.Viewport.add(Ext.create('App.view.Menu'));
    }
});

File: app/view/Menu.js

Code:

Ext.define('App.view.Menu', {
    extend: 'Ext.Container',

    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'Animals',
                itemTpl: '<b>{id}</b> {name}'
            }
        ]
    }
});

File: app/model/Animal.js

Code:

Ext.define('App.model.Animal', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'name',
                type: 'string'
            }
        ]
    }
});

File: app/store/Animals.js

Code:

Ext.define('App.store.Animals', {
    extend: 'Ext.data.Store',
    
    requires: ['App.model.Animal'],

    config: {
        model: 'App.model.Animal',
        
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'animals.php',
            reader: {
                type: 'json'
            }
        }
    }    
});

File: animals.php (to simulate loading data from a server/database)

Code:

<?php

echo json_encode(
    array(
        array( 'id' => 1, 'name' => 'Dog' ),
        array( 'id' => 2, 'name' => 'Cat' ),
        array( 'id' => 3, 'name' => 'Cow' )
    )
);

?>

Good luck and best regards

Schildi

**ingo.hefti** · 14 Nov 2012 10:24 PM

I think the main issue is that you should 'require' your model somewhere (probably in app.js).

But of course if changing to MVC (which BTW is not a must in V2, but a recommendation...), there might be some other work fields left.

I made a MVC sample in another thread. Maybe this can give you an idea: http://www.sencha.com/forum/showthre...l=1#post910390

**Schildi** · 14 Nov 2012 11:37 PM

Hi slmckenzie,

I also think, that you should require your model somewhere in your app.

That either can be in your app.js:

Code:

Ext.application({
    name: 'MyApp',

    models: [
        'Animals'
    ],

    [...]
});

I personally require the model in the store, that belongs to it, so what I do is

Code:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.Animal'
    ],
    config: {
        model: 'MyApp.model.Animal',
        [...]
    }
});

Hope this helps you a bit

Best regards,
Schildi

**slmckenzie** · 15 Nov 2012 6:59 AM

For both of you that recommended that the model needs to be 'require'd somewhere, either in app.js, or in the store, etc., I will take a closer look at that and see if that gets rid of that warning. I was almost positive I'd had it in there before and it didn't make a difference, but perhaps I had it in the wrong spot. I'll dig a bit more at it.

Would not having the model required cause the inconsistent results that I'm getting, where sometimes I get nothing, sometimes it's a warning, and sometimes it's an error that stops all page loading and functionality? That seems to be my biggest setback at the moment. I can ignore the warnings if I have to (I know, I know - 30 lashings for saying that!), but I definitely need to make sure I get rid of the inconsistency of the page not working, and having to refresh it to get it to finally work.

Thanks again!

**EDIT** - Darn it all! I verified that I had the model required in both the store, and the app. After refreshing multiple times, it appears that I still get the same three results as I was getting above (nothing, warning, and error). Still no dice.

I noticed that the warning deals with the store, and not the model. Is there a place that the store is supposed to be required at? I have it in the app.js under stores: [ 'Animals']. But it's throwing that warning to me.

In my view, I have where I Ext.Create() an instance of that store. Is that acceptable? or would it be better to reference it some other way? Would that be causing the problem?

Thanks!For both of you that recommended that the model needs to be 'require'd somewhere, either in app.js, or in the store, etc., I will take a closer look at that and see if that gets rid of that warning. I was almost positive I'd had it in there before and it didn't make a difference, but perhaps I had it in the wrong spot. I'll dig a bit more at it.

Would not having the model required cause the inconsistent results that I'm getting, where sometimes I get nothing, sometimes it's a warning, and sometimes it's an error that stops all page loading and functionality? That seems to be my biggest setback at the moment. I can ignore the warnings if I have to (I know, I know - 30 lashings for saying that!), but I definitely need to make sure I get rid of the inconsistency of the page not working, and having to refresh it to get it to finally work.

Thanks again!

** Edit of the Edit! **

So, I've played around with it a bit more, using the MVC example given by ingo.hefti. So far, so good! I cleaned up a bit of code, and it seems like now I get the warning on occasion (about 50% of the time), but the error never appears anymore! Woot! However, I still can't get that darn warning to go away!

The big piece of code that I changed to make the error seem to disappear was by removing the "store" as a require of the "model". Maybe I had been looking at it wrong before, but I had figured that the Store was something that was needed by the model, so that the model would work successfully. But apparently this seemed to make some circular reference or something that caused it to fail on occasion?

The point that I'm stuck at now, when trying to match with the MVC example given, is that of the warning saying that the store is synchronously loading. In looking at my code, versus that of the MVC example, the only difference now is that of the "view". In my code, as can be seen above, I run an Ext.Create(<storename>), store it in a variable, and then use that variable in my list. However, the example code doesn't do that, but rather uses the store name(?) in the List declaration on the view. I tried doing that, but then it comes back at me saying that the store cannot be found. I've tried using the shorthand name of the store ("Animals", like in the example), and I've tried using the full name ("Blue.store.Animals"). Both fail at finding the store.

Is there something glaringly simple that I'm overlooking?

Thanks!

**JRS** · 15 Nov 2012 9:04 AM

Hi

Just noticed you spell the model with 2 different names: Animal and Animals

Could this be causing the problems.

Good luck
JRS

**slmckenzie** · 15 Nov 2012 9:08 AM

Originally Posted by JRS

Hi

Just noticed you spell the model with 2 different names: Animal and Animals

Could this be causing the problems.

Good luck
JRS

JRS,

I *think* I spelled it the same everywhere. I looked, and couldn't find where I had put Animal instead of Animals. Could you point me to the direction where I did that (I've looked at the code for so long, my eyes are glazing over!) I know that Schildi posted some code in their post that didn't have an "s" on the end of Animal. But all of my code does have it, to the best of my knowledge.

Thanks!

**slmckenzie** · 15 Nov 2012 9:40 AM

One thing I realized I did was that I had the names of all the folders as plural. Example, "controllers", "modes", "stores", and "views", etc. Is this an issue? Do the names of the folders NEED to conform to the singular pattern? Or is that just a best practice?

I'm fighting with my SVN configuration on my Mac using Coda 2, and it's not liking me to rename folders, and it keeps breaking my SVN checkout. So, if I don't have to rename those folders, that would make things much simpler, but if I do need to rename the folders, then I guess I can fight with that as necessary!

**ingo.hefti** · 15 Nov 2012 9:54 AM

Originally Posted by slmckenzie

One thing I realized I did was that I had the names of all the folders as plural. Example, "controllers", "modes", "stores", and "views", etc. Is this an issue? Do the names of the folders NEED to conform to the singular pattern? Or is that just a best practice?

When you create an app using CMD3 then all the folder names are in singular.
http://docs.sencha.com/touch/2-1/#!/guide/command_app
But of course that doesn't mean, that it can not be changed. Only I don't know where...

**Schildi** · 15 Nov 2012 9:55 AM

Hi again

Originally Posted by slmckenzie

I verified that I had the model required in both the store, and the app.

Just to make sure I understood it correctly: you didn't require the model in the store and in app.js at the same time, did you? If yes: you should require it only once, either in the store or in the app.js

Originally Posted by slmckenzie

Is there a place that the store is supposed to be required at? I have it in the app.js under stores: [ 'Animals']. But it's throwing that warning to me.

I would require the store in the app.js-file, like you did. The warning could only mean, that you have some typo in your store's name. When you write in your app.js

Code:

stores: ['Animals']

then the app will try to include the file app/store/Animals.js. If this doesn't exist, it will throw an error. Note that there's an s in stores: ['Animals'], but no s in your folder-structure: app/store/Animals.js.
Are you sure that you did this correctly and don't have any typos? :-)

Originally Posted by slmckenzie

In my view, I have where I Ext.Create() an instance of that store. Is that acceptable? or would it be better to reference it some other way? Would that be causing the problem?

I think this Ext.create(...); isn't necessary...in your list, you can do

Code:

Ext.create('Ext.List', {
    store: 'Animals',
    [...]
});

when your store is called "Blue.store.Animals".
By the way, I think you don't need an id-property in your store...to access this store, you can easily do

Code:

var animalsStore = Ext.getStore('Animals');

Originally Posted by slmckenzie

The big piece of code that I changed to make the error seem to disappear was by removing the "store" as a require of the "model". Maybe I had been looking at it wrong before, but I had figured that the Store was something that was needed by the model, so that the model would work successfully. But apparently this seemed to make some circular reference or something that caused it to fail on occasion?

To require the store in the model-file is not correct I think. So it was the right decision to remove that

It's rather the other way round - the store need the model, because a store is a collection of models.

Originally Posted by slmckenzie

However, the example code doesn't do that, but rather uses the store name(?) in the List declaration on the view. I tried doing that, but then it comes back at me saying that the store cannot be found. I've tried using the shorthand name of the store ("Animals", like in the example), and I've tried using the full name ("Blue.store.Animals"). Both fail at finding the store.

Above I wrote about that. It is definitely possible to do

Code:

store: '{STORENAME}'

If this fails, the error must be caused by a different issue.

In general: maybe you can watch in your console's network-tab (e.g. im Chrome or in Safari) what's going on and which files are loaded at which point of time. Probably this will bring you a step further :-)

Best regards,
Schildi

**slmckenzie** · 15 Nov 2012 10:02 AM

Originally Posted by ingo.hefti

When you create an app using CMD3 then all the folder names are in singular.
http://docs.sencha.com/touch/2-1/#!/guide/command_app
But of course that doesn't mean, that it can not be changed. Only I don't know where...

I wrestled through SVN on the Mac and got it taken care of, so that all folder names were now singular. Still running into the same problem. But, at least I'm working on the right track towards success!

OK, so I'm a dummy. Simple MVC Help Please!

Thread Tools

Search Thread

Display

Answered: OK, so I'm a dummy. Simple MVC Help Please!

Answered: OK, so I'm a dummy. Simple MVC Help Please!

Is it a spelling issue?

Is it a spelling issue?