Geek Answers Handbook

How to link Store ViewModel to view?

I am a fairly new Ext JS and am trying to insert MultiSelect inside Panel .

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 link this in my View as follows:

 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 as null , although the data is not loaded into the widget. Instead of linking the repository, though, if I just hardcode it in the view, then it works.

Does anyone see what the problem is?

+6
source share
2 answers

You can pass an empty object as storage in addition to bind storage, thus 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

+6
source

This is a common problem. While you are using the proxy server in the store, you need to load the repository after viewing. Basically, add this to your View :

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

Edit: I did not notice that you already set autoLoad: true . After some research, the multiselect component should receive a “storage object” during rendering. This is why you get the "autoCreated" error. I mean, before creating a multi-select, his store must be created. In your case, your multiselective component is created first, and then the storage is tied to multiselect. To fix this problem check this script: 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
source

More articles:


All Articles