Aceess extjs viewmodel store in view

Question

How do I access and set store defined inside the viewmodel? I could able to set store created outside the viewmodel. But I want to keep the store inside the viewmodel and set that store in view for the grid.

View

Ext.define('MyApp.view.sample.Sample', {
extend: 'Ext.panel.Panel',

requires: [
    'MyApp.view.sample.SampleController',
    'MyApp.view.sample.SampleModel'
],

xtype: 'app-sample',
controller: 'sample',

viewModel: {
    type: 'sample'
},
items: [{
    xype: 'container',
        items: [
            {
                xtype: 'grid',
                store: 'sample', //This doesn't work. Store undefined error is thrown
                columns: [
                    {
                        text: 'Name',
                        dataIndex: 'name'
                    }
                ]
            }   
        ]
    }
]

});

ViewModel

Ext.define('MyApp.view.sample.SampleModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.sample',
stores: {
    sample: {
       // storeId: 'sample', //doesn't work even if I uncomment this
    fields: [ 'name' ],
        data: [
            { name: 'Lisa' },
            { name: 'Bart' },
            { name: 'Homer',}
        ]
    }
}
});

Answer 1

You need to bind your store (which you need to do for all properties taken from a ViewModel) and use the correct "binding" notation http://www.sencha.com/forum/showthread.php?284474-ViewModel-stores-help

xtype: 'grid',
bind: {
    store: '{sample}' // curly braces if referencing from ViewModel
},
columns: [
...
]

You are using ExtJS 5, correct? I only mention that because one of your tags is for 'extjs4' and ViewModels were not introduced until ExtJS 5.