ExtJS 6 - Vekil verilerinin oluşturulması

Question

Bir web servisinden bilgi alan bir proxy deposu var, bu bilgiyi bir panelde Izgara gibi bir şekilde göstermek istiyorum, "dataIndex" parametresini Alınan veriye bağlanın.

Bu hedefi ekstra kodlama olmadan nasıl yapabilirim, bu mümkün mü? Böyle

şey:

Vekil Mağaza:

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

Tek Record görüntülemek için Store'u gerekmez. Proxy, model düzeyinde tanımlanabilir.

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

Yük görünüşüdür yapıcısı/InitComponent veya kontrol başlatma yöntemi, bir kez basınız ViewModel kayıt yüklü ya da modeli. Sadece ekranda tek bir kayıt görüntülemek istiyorsanız

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

Bind ekran alanının burada

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

Ve model özelliği, https://fiddle.sencha.com/#fiddle/17t2