Wie binde ich ein Label an einen ViewModel-Store mit einem einzelnen Datensatz

Question

Ich benutze das Beispiel Admin-Dashboard, um einen Rahmen für eine Anwendung zu erstellen, und eines der Dinge, die ich mache, ist die Verkabelung der Kopfzeile des Dashboards.

Der folgende Code ist die Ansicht und der Store aus dem ViewModel, der Speicher erhält Daten, ich habe es überprüft, indem Sie diese Codezeile in einem Render-Listener verwenden, um zu überprüfen, ob Daten gefüllt werden.

Das Dashboard hat den folgenden Code in der Ansicht: Wie binde ich diesen Datensatz und das Feld "Name" des Geschäfts an die unten abgebildete tbtext-Komponente? Muss ich die Kopfleiste in ein Formular umbrechen, um den Datensatz zuerst aufzufüllen? Muss der Bind-Aufruf den auf Null basierenden Datensatz in irgendeiner Weise definieren? Oder wird der Datensatz möglicherweise nicht rechtzeitig geladen, basierend auf der Art und Weise, wie der Laden von einem ViewModel geladen wird (was keinen Sinn ergeben würde)?

Die Ellipsen verwendet werden irrelevant Code zu entfernen:

Ext.define('BbgApp.view.main.MainView', { 
extend: 'Ext.container.Viewport', 
alias: 'widget.mainview', 

requires: [ 
    'BbgApp.view.main.MainViewViewModel', 
    'BbgApp.view.main.MainViewViewController', 
    'BbgApp.view.main.MainContanierWrap', 
    'Ext.form.Panel', 
    'Ext.toolbar.Toolbar', 
    'Ext.Img', 
    'Ext.toolbar.TextItem', 
    'Ext.toolbar.Separator', 
    'Ext.list.Tree', 

], 

controller: 'mainmainview', 
viewModel: { 
    type: 'mainmainview' 
}, 
flex: 1, 
itemId: 'mainView', 
layout: 'border', 
items: [ 
    { 
     xtype: 'toolbar', 
     region: 'north', 
     cls: 'sencha-dash-dash-headerbar', 
     height: 100, 
     itemId: 'headerBar', 
     items: [ 
      ... 
      { 
       xtype: 'tbseparator', 
       flex: 1 
      }, 
      { 
       xtype: 'tbtext', 
       text: 'Bob Wazowski', 
       bind: { 
        text: '{userStore.name}' 
       }, 
       reference: 'tbname' 
      }, ... 

Hier ist das Ansichtsmodell Code:

Ext.define('BbgApp.view.main.MainViewViewModel', { 
extend: 'Ext.app.ViewModel', 
alias: 'viewmodel.mainmainview', 

requires: [ 
    'Ext.data.Store', 
    'Ext.data.field.Field', 
    'Ext.data.proxy.Rest', 
    'Ext.data.reader.Json' 
], 

stores: { 
    userStore: { 
     pageSize: 0, 
     remoteFilter: true, 
     remoteSort: true, 
     autoLoad: true, 
     fields: [ 
      { 
       name: 'id' 
      }, 
      { 
       name: 'name' 
      }   ], 
     proxy: { 
      type: 'rest', 
      noCache: false, 
      url: '/api/user', 
      appendId: false, 
      reader: { 
       type: 'json', 
       rootProperty: 'data' 
      } 
     } 
    } 
} 

});

Answer 1

In Ihrem ersten Code-Block, können Sie diesen Teil fehlen (vor der items Eigenschaft):

viewModel: { 
    xclass: 'BbgApp.view.main.MainViewViewModel' 
}, 

Mit anderen Worten, stellen Sie die viewmodel Sicht.