ExtJS 6 - Proxy-Daten binden zu

Question

Ich habe einen Proxy-Speicher, der Informationen von einem Webservice abruft. Ich möchte diese Informationen in einem Panel wie ein Grid anzeigen, in dem ich den Parameter "dataIndex" festlege Bind in den abgerufenen Daten.

Wie kann ich dieses Ziel ohne zusätzliche Codierung erreichen, ist das möglich?

Etwas wie folgt aus:

Proxy Store:

Ext.define('MyStore', { 

    extend: 'Ext.data.Store', 
    alias: 'store.myStore', 
    model: 'myModel', 
    autoload: true, 

    proxy: { 
    type: <wsType>, 
    url: <wsUrl> 
    }, 
    scope: this 

}); 

Panel:

Ext.define('<myPanel>', { 

    extend: 'Ext.panel.Panel', 

    ... 

    store: Ext.create(<myStore>), 

    ... 


    items: [ 
    { 
    xtype: 'titlePanel', 
    cls: 'titlePanel', 
    html: '<div class="titlePanel"><h1>My Title</h1></div>', 
    }, 
    { 
     xtype: 'form', 
     layout: 'vbox', 
     cls: 'whitePanel', 
     items: [ 
     { 
     xtype: 'panel', 

     layout: 'column', 
     items: [ 
     { 
      xtype: 'displayfield', 
      displayField: 'name', 
      dataIndex: 'name', 
      fieldLabel: Ext.locale.start, 
      name: 'start' 
     }, 
    ... 

Answer 1

Sie benötigen Shop nicht für einen einzelnen Datensatz angezeigt wird. Proxy kann auf einer Modellebene definiert werden.

Ext.define('MyApp.model.Contact', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'firstName', 'middleName', 'lastName'], 
    proxy: { 
     type: 'ajax', 
     url: 'contacts.json', 
     reader: { 
      type: 'json', 
      rootProperty: 'data' 
     } 
    } 
}); 

Last das Modell entweder im Hinblick Konstruktor/initcomponent oder Controller-Init-Methode einmal Push den Datensatz zu Ansichtsmodell geladen.

initComponent: function() { 
    this.callParent(arguments); 
    var me = this; 
    MyApp.model.Contact.load(1, { 
     success: function(record, operation) { 
      me.getViewModel().set('contact', record); 
     } 
    }) 
}, 

Bind das Modell-Eigenschaft auf dem Anzeigefeld

 items: [{ 
      name: 'firstName', 
      fieldLabel: 'First Name', 
      bind: '{contact.firstName}', 
      xtype: 'displayfield' 
     }] 

Und hier ist die Geige https://fiddle.sencha.com/#fiddle/17t2