How to bind ViewModel Store to View?

Question

I'm pretty new Ext JS and trying to embed a MultiSelect inside a Panel.

The ViewModel has a stores property as you can see here:

Ext.define('TEST.view.controls.search.SearchFilterModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.filter',
    data: {
        title: ''
    },
    stores: {
        test: {
            fields: ['id', 'name'],
            proxy: {
                type: 'ajax',
                url: 'api/test',
                reader: 'array'
            },
            autoLoad: true
        }
    }
});

---

I would like to bind that in my View like this:

viewModel: {
    type: 'filter'
},


layout: 'fit',
border: 1,
plain: true,
scrollable: 'y',
layout: 'fit',


bind: {
    title: '{title}',
},


items: {
    xtype: 'multiselect',
    scrollable: false,
    allowBlank: true,
    ddReorder: true,
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

---

In this case, the store ends up as null though and no data is loaded into the widget. Instead of binding the store though, if I just hardcode it in the View, then it works.

Anyone see what the issue is?

Answer 1

You can pass an empty object as a store additionally to binding the store, that way the initComponent will work, for example:

{
    xtype: 'multiselect',
    fieldLabel: 'Multiselect',
    store: {},
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

Working example: https://fiddle.sencha.com/#fiddle/ur8

Answer 2

It's common issue. As long as you use proxy in store, you have to load store after viewrendered. Basically, add this to your View:

listeners: {
            afterrender: function(view) {
                this.getViewModel().getStore('{test}').load(); // this will provide proxy is being loaded
            }
           }

Edit: I didn't notice you already put the autoLoad: true . After some research, multiselect component has to get "store object" during render. That's why you get the 'autoCreated' error. I mean, before multiselect is created, its store has to be created. In your case, your multiselect component is created first, then store is binded to multiselect. To fix this issue please check this fiddle: https://fiddle.sencha.com/#fiddle/uqu

listeners: {
                afterrender: function(view) {
                    view.add({
                        xtype: 'multiselect',
                        scrollable: false,
                        allowBlank: true,
                        ddReorder: true,
                        fieldLabel: 'Multiselect',
                        store: view.getViewModel().getStore('test'), // comment to get autoCreated error
                        valueField: 'id',
                        displayField: 'name'
                    });
                }  
            },