ExtJS 6 - 将代理数据绑定到表单

Question

我有一个从网络服务检索信息的代理存储，我想以类似于网格的方式在面板中显示该信息，我在其中设置 "dataIndex" 参数以绑定检索到的数据。

如何在没有额外编码的情况下实现这个目标，这可能吗？

像这样：

代理商店：

Ext.define('MyStore', {

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

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

});

面板：

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

您不需要商店来显示单个记录。可以在模型级别定义代理。

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

在视图 constructor/initComponent 或控制器初始化方法中加载模型，加载后将记录推送到 ViewModel。

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

将模型属性绑定到显示字段

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

这是 fiddle https://fiddle.sencha.com/#fiddle/17t2

ExtJS 6 - 将代理数据绑定到表单

ExtJS 6 - Bind proxy data to form

proxy

extjs

extjs6