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?

Why did you decided that the store is null? As for me the provided snippet is good and should work. You should provide all the code of the view, the best will be to provide jfiddle or sencha fiddle to demonstrate the problem. — yorlin, Oct 03 '15 at 17:16
@yorlin - Thanks I'll try to put together a sencha fiddle. The error was `Uncaught TypeError: Cannot read property 'autoCreated' of null` — Dave L., Oct 03 '15 at 18:04
I had the exact binding structure of your view but for Combobox and It doesn't work. after waist a lot minutes by setting 'queryMode:local' for combo It works. :| — Mohammadreza, Mar 03 '19 at 14:30

score 6 · Accepted Answer · answered Oct 04 '15 at 05:37

6

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

answered Oct 04 '15 at 05:37

CD..

72,281
25
154
163

Do you think this is a bug or just an undocumented oddity? Is this at all common that you would need to pass `store` twice like that? – Dave L. Oct 04 '15 at 18:10
1

Actually when you bind a store, first of all extjs creates an empty store(not null, but a temporal store), and then binds a normal store. The problem is that binding happens asynchronous and with delay. The question is when you want to access your store. It can be, that you tries to access the store when extjs is not ready even with empty store. – yorlin Oct 05 '15 at 07:33
@yorlin -- That makes sense but I feel like that is an implementation detail that new extjs developers shouldn't need to know. And it requires that redundant looking syntax above related to the `store`. – Dave L. Oct 06 '15 at 15:57
I faced that same problem and when i tried add: `store: {},` The bind delay so my multi combobox no drop downlist. I use this: [Custorm for work on Modern](https://github.com/facilitiesexchange/TagField) – Meas Sep 22 '18 at 11:08

Semih Gokceoglu · Answer 2 · 2015-10-03T23:03:36.333

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'
                    });
                }  
            },

+1, but I like the other solution a little better. Although neither one is very satisfying. Seems like a bug to me. — Dave L., Oct 04 '15 at 18:12

How to bind ViewModel Store to View?

2 Answers2