Can't Access Any Dynamically Created Stores

[TheStreet]

So I'm working on an app that receives information from a web service, and based on that information I need to created local and remote data stores. I'm using shepsii's SQLite proxy which is working great, but I'm having trouble accessing stores that I'm creating on the fly. Maybe someone can check out my code and see if there's something I'm missing. If I try to Ext.getStore(storeName) it comes back undefined.

Ext.define('TheStreet.controller.Main', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.DateExtras'],
    config: {
        refs: {
            viewport        : 'viewport',
            newsmenu        : 'newsmenu',
            newsfeed        : 'newsfeed',
            updated         : '#updatedOn',
            widgetPanel     : '#widgetpanel',
            articleCarousel : 'articleCarousel'
        },
        control: {
            viewport: {
                ready: 'launch'
            }
        },
    },


    init: function() {
        this.callParent();
        
        this.sectionStore             = Ext.getStore('Sections');
        this.sectionSyncStore         = Ext.getStore('SectionSync');
        this.lastUpdatedStore         = Ext.getStore('LastUpdated');
    },
        
    launch: function() {
        var me = this;


        me.createSectionStores();
    },


    createSectionStores: function() {
        this.sectionSyncStore.load({
            callback: function(records, operation, success) {
                this.sectionStore.getProxy().truncate('sections');


                this.sectionSyncStore.each(function(record) {
                    var rec = Ext.create('TheStreet.model.Section', record);
                    rec.save();
                });


                this.sectionStore.load({
                    callback: this.onSectionCreation,
                    scope: this
                });
            },
            scope: this
        });
    },


    onSectionCreation: function(records, operation, success) {
        console.log('section store', this.sectionStore);
        console.log('section store count', this.sectionStore.getCount());


        this.sectionStore.each(function(rec, index, numItems) {
            var name = rec.data.name.replace(/\s/g, ''),
                source = rec.data.source;


            this.createNewsModel(name);
            this.createNewsSyncStore(name, source);
            this.createNewsStore(name);
            this.syncStore(name);
        }, this);
    },


    createNewsModel: function(modelName) {
        return Ext.define(modelName, {
            extend: 'Ext.data.Model',
            config:{
                fields: [
                    {name: 'id',            type: 'int'},
                    {name: 'articleId',     type: 'int'},
                    {name: 'headline',      type: 'string'},
                    {name: 'body',          type: 'string'},
                    {name: 'callout',       type: 'string'},
                    {name: 'byLine',        type: 'string'},
                    {name: 'smallThumb',    type: 'string'},
                    {name: 'largeThumb',    type: 'string'},
                    {name: 'industry',      type: 'string'},
                    {name: 'category',      type: 'string'},
                    {name: 'subcategory',   type: 'string'},
                    {name: 'publishDate',   type: 'string'},
                    {name: 'tickers',       type: 'string'}
                ],
                proxy: {
                    type: 'sqlitestorage',
                    dbConfig: {
                        tablename: modelName,
                        dbConn: TheStreet.util.InitSQLite.getConnection()
                    },
                    reader: {
                        type: 'array'
                    }
                }
            }             
        });
    },


    createNewsSyncStore: function(storeName, proxyURL) {
        return Ext.define(storeName+'Sync', {
            extend: 'Ext.data.Store',
            config:{
                model: storeName,
                proxy: {
                    type: 'ajax',
                    url: proxyURL,
                    extraParams: {
                        max: '15',
                        contentFmt: 'ipad_html'
                    },
                    reader: {
                        type: 'json',
                        rootProperty: 'response.articles'
                    }
                }
            }             
        });
    },


    createNewsStore: function(storeName) {
        return Ext.define(storeName, {
            extend: 'Ext.data.Store',
            config:{
                model: storeName,
                storeId: storeName,
                autoLoad: true,
                pageSize: 1000,
                sorters: [
                    {
                        property : 'publishDate',
                        direction: 'DESC'
                    }
                ]
            }             
        });
    },


    syncStore: function(name) {
        var store = Ext.getStore(name),
            syncStore = Ext.getStore(name+'Sync'),
            stores = Ext.data.StoreManager.getRange();


        console.log(name);
        console.log(stores);
        console.log(Ext.isDefined(syncStore));


        syncStore.load({
            callback: function(records, operation, success) {
                 console.log('loading top news');
                // Clear out the offline people list
                store.getProxy().truncate(store.getId());


                syncStore.each(function(record) {
                    var rec = Ext.create('TheStreet.model.'+name, record);
                    rec.save();
                });
                store.load(); // Reload store
            },
            scope: this
        });
    }


});

[jerome76]

You are defining the stores, but you never Ext.create them.

[TheStreet]

Oh snap! I was under the impression that Ext.define both defined and instantiated the class. This is the first time I'm creating stores and models on the fly. Previously I was defining them and "instantiating" them in app.js by using the stores and models configs, which I thought just "loaded" files to be instantiated later. Can someone please clarify this process for me?

Regardless, I'm trying to log if it is even defined and that is returning false. Any more help here would be greatly appreciated.

[jerome76]

Previously I was defining them and "instantiating" them in app.js by using the stores and models configs, which I thought just "loaded" files to be instantiated later. Can someone please clarify this process for me?

That is the orthodox way of going about it. The way you have now is okay, but I would split the definitions into separate JS files. Then where you have your definitions now, you can use

var store = Ext.create('app.full.path.className', { ... });

Does that make sense?

Regardless, I'm trying to log if it is even defined and that is returning false. Any more help here would be greatly appreciated.

It will be false until there is an instance of that class (i.e. using Ext.create or new Ext.data.Store(...)).

[TheStreet]

Right. I was previously defining them is JS files and using the controller configs as I mentioned above, I'm sorry if my last post wasn't clear.

The problem is that I don't know the stores and model's I will need until runtime when I make an ajax call and retrieve data which has the web service locations of the data I need to create the stores and models which is why i moved them into a controller to compute after the first store is loaded.

[TheStreet]

So I swapped out those Ext.defines on the Stores for this:

createNewsSyncStore: function(storeName, proxyURL) {
        return Ext.create('Ext.data.Store', {
            model: storeName,
            storeId: storeName+'Sync',
            proxy: {
                type: 'ajax',
                url: proxyURL,
                extraParams: {
                    max: '15',
                    contentFmt: 'ipad_html'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'response.articles'
                }
            }         
        });
    },


    createNewsStore: function(storeName) {
        return Ext.create('Ext.data.Store', {
            model: storeName,
            storeId: storeName,
            autoLoad: true,
            pageSize: 1000,
            sorters: [
                {
                    property : 'publishDate',
                    direction: 'DESC'
                }
            ]        
        });
    },

[TheStreet]

Forget it. Cache wasn't cleared... Now it is creating stores based on the model I defined. Thx for the help.