Как связать Store ViewModel для просмотра?

Question

Я довольно новый Ext JS и пытаюсь вставить MultiSelect внутри Panel.

ViewModel имеет stores свойство, как вы можете увидеть здесь:

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

Я хотел бы связать, что в моем View так:

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' 
} 

В этом случае store заканчивается как null, хотя и данные не загружаются в виджет. Вместо того, чтобы связывать хранилище, хотя, если я просто жестко кодирую его в представлении, то он работает.

Кто-нибудь может понять, в чем проблема?

Answer 1

Вы можете передать пустой объект в хранилище дополнительно к связыванию магазина, что способ initComponent будет работать, например:

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

Working пример: https://fiddle.sencha.com/#fiddle/ur8

Answer 2

Это обычная проблема. Пока вы используете прокси-сервер в магазине, вам нужно загрузить хранилище после просмотра. В основном, это добавить к вашему View:

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

Edit: я не заметил, что ты уже поставил autoLoad: true. После некоторых исследований компонент multiselect должен получить «объект хранения» во время рендеринга. Вот почему вы получаете ошибку «autoCreated». Я имею в виду, что до создания мультиселекта его магазин должен быть создан. В вашем случае сначала создается ваш мультиселективный компонент, а затем хранилище привязано к multiselect. Чтобы устранить эту проблему, пожалуйста, проверьте эту скрипку: 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' 
        }); 
       } 
      },