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

[slmckenzie]

Hi again


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


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

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? :-)


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

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

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

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.


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

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

Schildi,

I'll try to address your various parts of your message individually. Hopefully we can get it all figured out in the end!

You're right, I misspoke. I didn't have the model "require"d in the app.js. I had it as:

models: [ 'Animals']

in the app.js, and had it as:

require: ['Blue.model.Animals']

in the Animals.js store.

In your next statement, I have the Animals.js store also as a config object in the app.js as:

stores: ['Animals']

You're correct. I went back in and changed all of my folders within the app directory to be singular, without an "s" at the end of the name. So, the name of my file is "Animals.js", and it's within the "app/store" directory, and it's configured under the "stores" parameter in app.js.

In your example of creating the list, it doesn't seem to be able to find that store when doing what you coded. I continually get the error of:

[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found

I also went ahead and dropped the ID property in the store, since it wasn't really necessary, as you stated.

I have it set up now that the store requires the model, but the model is not requiring the store.

I'll try to debug some more via the console in Chrome, and see if that gets me any farther. Hopefully this information can give you a better idea of what the issue is as well.

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

Ext.application({
    name: 'App',

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

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

File: app/view/Menu.js

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

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

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

File: app/store/Animals.js

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)

<?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

[slmckenzie]

So, I eventually gave up and started completely over from scratch again. I followed the "Getting Started" app, and built it up from there (previously I had included the entire SDK package, vs. generating an app instead).

After doing so, I realized that I think I had "require", instead of "requires" as a configuration setting in the various . JS files! That was probably my demise when trying to get everything working. So, a combination of verifying that was correct, plus starting over, plus generating the app shell using the command line tools, seemed to take care of the problem for me!

All is well, I'm a few thousand lines of code in, multiple view / stores later, and everything is working like a champ. Thanks all for your help!

[Schildi]

Mmmh, that damned "s"
But nice to hear that it works now.

Best regards,
Schildi

[rodevin]

thanks