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