extjs - 在 ExtJS 中使用网格作为字段

Question

在 ExtJS 中将模型属性绑定(bind)到表单字段非常容易:

// ...skipped everything until fields config for brevity
}, {
  xtype: 'textfield',
  bind: '{modelInstance.someField}'
}, { // ...

在这种情况下， modelInstance字符串字段 someField由于两种方式绑定(bind)，将同步到文本框值。这很棒。

我想要实现的是在模型字段不是字符串而是数组的情况下获得相同的行为。这是模型:

Ext.define('namespace.model.CustomModel', {
  fields: ['easyField', {
    name: 'hardField',
    type: 'auto'  // This will be an array during runtime
  }],
  idProperty: 'easyField'
});

我想做这样的事情:

// ...skipped everything until fields config for brevity, 
// assume that viewmodel and everything else are set up as expected
}, {
  xtype: 'textfield',
  bind: '{modelInstance.easyField}'
}, {
  xtype: 'gridfield',
  bind: {
    gridArray: '{modelInstance.hardField}'
  }
}, { // ...

可以理解，我想要 gridfield要扩展的组件 Ext.grid.Panel并将其存储数据同步到 modelInstance字段 hardField .

目前我有这个:

Ext.define('namespace.form.field.GridField', {
  extends: 'Ext.grid.Panel',
  xtype: 'gridfield',
  // skip requires for brevity
  viewModel: {
    stores: {
      gridFieldItems: {
        type: 'gridfielditems'  // Simple in memory store
      }
    },
    data: {
    }
  },
  store: '{gridFieldItems}',
  // This config enables binding to take place as it creates getters and setters,
  // gridArray is set initially to '{modelInstance.hardField}' as expected
  config: {
    gridArray: null
  },
  // This is necessary for this grid-field component to update 
  // '{modelInstance.hardField}' back in the owners viewModel. 
  publishes: {
    gridArray: true
  },

  // ???
  // bind: {
  //   gridArray: bind gridArray to store data somehow?
  // }

});

这是问题所在:

我如何注入(inject)现有的modelInstance.hardField数组为 gridFieldItems存储初始数据，

如何绑定(bind)gridArray配置存储数据，以便在我们对网格进行粗化时更新，

以优雅的 MVVM 方式完成所有这些操作，而无需编写一堆试图强制 JS 对象之间同步的监听器。

请提供已知可行的经过测试的解决方案，我自己已经尝试了很多不同的方法，但到目前为止还没有成功。

Answer 1

这是实现此绑定(bind)的工作 fiddle 。简单的方法是将数组字段与商店的“数据”属性绑定(bind)。
对您所做工作的一个很好的建议是避免在通用组件(网格域)内定义 View 模型，而仅在您的应用程序特定 View 上使用 View 模型。
在您的通用组件上，您应该仅使用 setter/getter/update 逻辑定义配置属性，以便能够将它们与绑定(bind)一起使用。在这种情况下，不需要自定义属性，因为商店就足够了。

编辑
为避免“简单绑定(bind)”，您可以在 girdfield 组件中实现数组的设置/获取逻辑。例如，使用 setter 调用的“updateGridArray”方法和 store 的“datachanged”事件。
fiddle 已更新，示例 girdfield 使用单元格编辑插件来显示 2 路绑定(bind)。

fiddle :https://fiddle.sencha.com/#view/editor&fiddle/2a3b

    Ext.define('Fiddle.model.CustomModel', {
        extend: 'Ext.data.Model',
        fields: ['easyField', {
            name: 'hardField',
            type: 'auto' // This will be an array during runtime
        }],
        idProperty: 'easyField'
    });
    Ext.define('Fiddle.fiddleview.CustomViewModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.fiddleview',

        data: {
            currentModel: null
        }
    });
    Ext.define('Fiddle.form.field.GridField', {
        extend: 'Ext.grid.Panel',
        xtype: 'gridfield',

        config: {
            gridArray: null
        },

        publishes: [
            'selection',
            'gridArray'
        ],

        selModel: 'cellmodel',
        plugins: {
            cellediting: {
                clicksToEdit: 1
            }
        },

        columns: [{
            text: 'Column 1',
            flex: 1,
            editor: true,
            dataIndex: 'field1'
        }],

        initComponent: function () {
            this.store = {
                fields: ['field1'],
                data: [],
                listeners: {
                    scope: this,
                    datachanged: function (store) {
                        this.setGridArray(store.getRange().map(function (record) {
                            return record.getData();
                        }));
                    }
                }
            };

            this.callParent();
        },

        updateGridArray: function (gridArray) {
            this.getStore().suspendEvent('datachanged');
            if (Ext.isEmpty(gridArray)) {
                this.getStore().removeAll();
            } else {
                this.getStore().loadData(gridArray);
            }
            this.getStore().resumeEvent('datachanged');
        }

    });

    var myView = Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),

        viewModel: 'fiddleview',

        items: [{
            xtype: 'gridfield',
            bind: {
                gridArray: '{currentModel.hardField}'
            }
        }]
    });

    // Bind on model's array to check two-way update
    // It will execute also on cell edit
    myView.getViewModel().bind('{currentModel.hardField}', function (value) {
        window.alert('model\'s array changed');
    });

    // The binding is now active, when the "currentModel" in the viewmodel changes, grid rows are refresched
    myView.getViewModel().set('currentModel', new Fiddle.model.CustomModel({
        hardField: [{
            field1: 'value1'
        }]
    }));
    // Also when data changes in the "currentModel"
    myView.getViewModel().get('currentModel').get('hardField').push({
        field1: 'value2'
    });