How do I reference a store from a view in a MVC app?

[robl]

I have a Panel which has a List of employees. The employees are in store/Employees.js.

view/Employees.js

Ext.define('MyApp.view.Employees', {
    extend: 'Ext.Panel',
    xtype: 'employeepanel'
    config: {
        title: 'Employees',
        iconCls: 'team',
        layout: 'card',
        items: [
        {
            xtype: 'panel',
            layout: 'fit',
            items: [
            {
                xtype: 'list',
                indexBar: true,
                itemTpl: '<div>{lastName}</div>',
                store: MyApp.store.Employee
            }
            ]
        }
        ]
    },
});

store/Employees.js

Ext.define('MyApp.store.Employees', {
 extend: 'Ext.data.Store',
model: 'MyApp.model.Employee',
requires: ['MyApp.model.Employee']
data: [
{ lastName: 'Smith', firstName: 'Robert'},
{ lastName: 'Brown', firstName: 'John'},
{ lastName: 'Evans', firstName: 'Mary'}
]

}
);

In the config:

store: MyApp.store.Employee

Should this be in quotes? Should it be the "id" of the store? Do I need a "requires"?

[TommyMaintz]

The MVC package automatically assigns id's to stores based on their class name. In your example the following should work:

store: 'Employee'

Remember to add this store in either your Application, a Controller, or as a requires in your View.

[robl]

Thanks but it doesn't work in that nothing is displayed in the list. How can I debug this? Is there a method I can implement to dump the contents of the store? And how do I reference the store from that method?

[robl]

The strange thing is that this code doesn't work:

            {
                xtype: 'list',
                indexBar: true,
                itemTpl: '<div>{lastName}</div>',
                store: 'MyApp.store.Employee'
            }

but this does work:

            {
                xtype: 'list',
                indexBar: true,
                itemTpl: '<div>{lastName}</div>',
                store: {
                    model: 'MyApp.model.Employee',
                    data: [
                    { lastName: 'Brown' },
                    { lastName: 'Smith' }
                    ]
                }
            }

[DrunkenBeard]

@robl,

You are forgetting an "s" after Employee. The store is defined as MyApp.store.Employees but you're referencing it as MyApp.store.Employee. Try this instead :

{
    xtype: 'list',
    indexBar: true,
    itemTpl: '<div>{lastName}</div>',
    store: 'Employees'
}

[robl]

Unfortunately, that was just a typo in my post and not in my code. I am still looking for a solution. More importantly, I am looking for a way to debug these types of problems. I need to help on what methods I can add to a Component that allow me to print out debug logs before and after the component is rendered (or thereabouts.) The only one I know of is "initialize" I also need to know how to reference objects that are part of a config: i.e. If I have a "list" inside a "panel", how do I get a reference to it so that I can print a debug log with some of it's attributes?

@robl,

You are forgetting an "s" after Employee. The store is defined as MyApp.store.Employees but you're referencing it as MyApp.store.Employee. Try this instead :

{
    xtype: 'list',
    indexBar: true,
    itemTpl: '<div>{lastName}</div>',
    store: 'Employees'
}

[robcolburn]

Check out Tommy's post:
http://www.sencha.com/learn/architec...xt-js-4-part-3

Looks like you want to avoid ref'ing a view from a store if you can. If you need to, add a

<code>
...
stores: ['Employees']
...
</code>

to your Employees view. Then you can do this.getEmployeesStore() for your list.