Question

I have created a model and store in which read in a json file as shown below. How can I reference this store in my app.js?

I would like to take the search-list example that Sencha gives here.

And use the store as a drop in replacement for this line in the example:

store = this.getStore();

[Update] Added the reformatted app.js here.

Model:

Ext.define('Sencha.model.Contact', {
    extend: 'Ext.data.Model',

    config: {
        fields: [{
            name: 'firstName',
            type: 'string'
        }, {
            name: 'lastName',
            type: 'string'
        }]
    }
});

Store:

Ext.define('Sencha.store.Contacts', {
    extend: 'Ext.data.Store',
    config: {
        model: 'Sencha.model.Contact',
        sorters: 'firstName',
        autoLoad: true,

        grouper: {
            groupFn: function(record) {
                return record.get('firstName')[0];
            }
        },
        proxy: {
            type: 'ajax',
            url: 'contacts.json'
        }
    }
});

Formatted: app.js

Ext.application({
    phoneStartupScreen: "resources/loading/Homescreen.jpg",
    tabletStartupScreen: "resources/loading/Homescreen~ipad.jpg",
    glossOnIcon: false,
    icon: {
        57: "resources/icons/icon.png",
        72: "resources/icons/[e-mail]",
        114: "resources/icons/[e-mail]",
        144: "resources/icons/[e-mail]"
    },
    requires: ["Ext.data.Store", "Ext.List", "Ext.field.Search", "Ext.Toolbar"],
    launch: function() {
        var a = this.getListConfiguration();
        if (!Ext.os.is.Phone) {
            Ext.Viewport.add({
                xtype: "panel",
                width: 380,
                height: 420,
                centered: true,
                modal: true,
                hideOnMaskTap: false,
                layout: "fit",
                items: [a]
            }).show()
        } else {
            Ext.Viewport.add(a)
        }
    },
    getListConfiguration: function() {
        return {
            xtype: "list",
            ui: "round",
            pinHeaders: false,
            itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
            store: this.getStore(),
            grouped: true,
            emptyText: '<div style="margin-top: 20px; text-align: center">No Matching Items</div>',
            disableSelection: true,
            items: [{
                xtype: "toolbar",
                docked: "top",
                items: [{
                    xtype: "spacer"
                }, {
                    xtype: "searchfield",
                    placeHolder: "Search...",
                    listeners: {
                        scope: this,
                        clearicontap: this.onSearchClearIconTap,
                        keyup: this.onSearchKeyUp
                    }
                }, {
                    xtype: "spacer"
                }]
            }]
        }
    },
    getStore: function() {
        if (!this.store) {
            this.store = Ext.create("Ext.data.Store", {
                fields: ["firstName", "lastName"],
                sorters: "lastName",
                groupField: "lastName",
                data: [{
                    firstName: "Tommy",
                    lastName: "Maintz"
                }, {
                    firstName: "Rob",
                    lastName: "Dougan"
                }, {
                    firstName: "Ed",
                    lastName: "Avins"
                }, {
                    firstName: "Jamie",
                    lastName: "Avins"
                }, {
                    firstName: "Dave",
                    lastName: "Dougan"
                }, {
                    firstName: "Abraham",
                    lastName: "Elias"
                }, {
                    firstName: "Jacky",
                    lastName: "Ngyuyen"
                }, {
                    firstName: "Jay",
                    lastName: "Ngyuyen"
                }, {
                    firstName: "Jay",
                    lastName: "Robinson"
                }, {
                    firstName: "Rob",
                    lastName: "Avins"
                }, {
                    firstName: "Ed",
                    lastName: "Dougan"
                }, {
                    firstName: "Jamie",
                    lastName: "Poulden"
                }, {
                    firstName: "Dave",
                    lastName: "Spencer"
                }, {
                    firstName: "Abraham",
                    lastName: "Avins"
                }, {
                    firstName: "Jacky",
                    lastName: "Avins"
                }, {
                    firstName: "Rob",
                    lastName: "Kaneda"
                }, {
                    firstName: "Ed",
                    lastName: "Elias"
                }, {
                    firstName: "Tommy",
                    lastName: "Dougan"
                }, {
                    firstName: "Rob",
                    lastName: "Robinson"
                }]
            })
        }
        return this.store
    },
    onSearchKeyUp: function(f) {
        var e = f.getValue(),
            b = this.getStore();
        b.clearFilter();
        if (e) {
            var d = e.split(" "),
                a = [],
                c;
            for (c = 0; c < d.length; c++) {
                if (!d[c]) {
                    continue
                }
                a.push(new RegExp(d[c], "i"))
            }
            b.filter(function(h) {
                var g = [];
                for (c = 0; c < a.length; c++) {
                    var j = a[c],
                        i = h.get("firstName").match(j) || h.get("lastName").match(j);
                    g.push(i)
                }
                if (a.length > 1 && g.indexOf(false) != -1) {
                    return false
                } else {
                    return g[0]
                }
            })
        }
    },
    onSearchClearIconTap: function() {
        this.getStore().clearFilter()
    }
});

Answer 1

The easiest way to do this is to set an id for your store and get it later using

Ext.getStore('your-store-id');

PS: If you get undefined for this, you should create your store first, something like this:

store = Ext.create('Sencha.store.Contacts');