Wie binden Sie ViewModel Store an View?

Question

Ich bin ziemlich neu Ext JS und versuchen, eine MultiSelect in eine Panel einzubetten.

Die ViewModel hat eine stores Eigenschaft, wie Sie hier sehen können:

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

Ich möchte, dass wie dies in meinem View binden:

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 diesem Fall wird die store endet als null obwohl und keine Daten in das Widget geladen werden. Anstatt den Speicher zu binden, wenn ich ihn nur in der Ansicht fest codiere, funktioniert es.

Wer sieht, was das Problem ist?

Answer 1

Sie können ein leeres Objekt als Speicher übergeben zusätzlich den Laden zu binden, auf diese Weise die initComponent arbeiten, zum Beispiel:

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

Arbeits Beispiel: https://fiddle.sencha.com/#fiddle/ur8

Answer 2

Es ist ein häufiges Problem. Solange Sie den Proxy im Laden verwenden, müssen Sie den Laden nach der Ansicht laden. Grundsätzlich fügen Sie diese zu Ihrer View:

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

Edit: Ich habe nicht bemerkt, Sie schon die autoLoad: true setzen. Nach einigen Nachforschungen muss die Multiselect-Komponente während des Renderns "Objekt speichern" erhalten. Deshalb erhalten Sie den Fehler 'autoCreated'. Ich meine, bevor Multiselect erstellt wird, muss sein Speicher erstellt werden. In diesem Fall wird die Multiselect-Komponente zuerst erstellt, dann wird der Speicher an Multiselect gebunden. Um dieses Problem zu beheben Sie bitte diese Geige überprüfen: 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' 
        }); 
       } 
      },