Question

我有一个代理商店，可以从网络服务中检索信息，我希望以类似网格的方式在Panel中显示该信息，我在其中设置“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

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

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

在视图构造函数/ initComponent或controller init方法中加载模型，加载后将记录推送到ViewModel。

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

将model属性绑定到显示字段

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

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

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

1 个答案: