Extjs自动表单网格/绑定

Question

这是ext js中的这个原始row editor工具
我正在寻找更复杂的网格和实际形式的工具 一些具有良好API的东西，所以我可以让用户在全屏幕上看到来自而不仅仅是连续的。 能够帮助我构建越来越多的CRUD而无需一次又一次地重新创建表单的东西 像设置中的“表单渲染器”。

我在哪里可以获得这种API 谢谢

Answer 1

我不知道任何内置的“表单渲染器”，但您可以使用表单的loadRecord方法创建模拟。
首先，您使用与表单columns相同的输入集创建表单（显然，您可以动态地执行此操作）。例如，如果您的columns配置如下所示：

columns: [
    {header: 'Name',  dataIndex: 'name'},
    {header: 'Email', dataIndex: 'email', flex:1},
    {header: 'Phone', dataIndex: 'phone'}
],

您的表单配置应如下所示：

Ext.define('ux.FormEditor', {
    extend: 'Ext.window.Window',
    alias : 'widget.formeditor',
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                    xtype: 'textfield',
                    name : 'name',
                    fieldLabel: 'Name'
                },{
                    xtype: 'textfield',
                    name : 'email',
                    fieldLabel: 'Email'
                },{
                    xtype: 'textfield',
                    name : 'phone',
                    fieldLabel: 'Phone'
                }]
        }];

        this.buttons = [{
                text: 'Save',
                action: 'save'
            },{
                text: 'Cancel',
                scope: this,
                handler: this.close
            }];

        this.callParent(arguments);
    }
});

现在为网格的itemdblclick事件分配处理程序：

yourGrid.on('itemdblclick', function(grid, record) {
    var view = Ext.widget('useredit'),
        form = view.down('form');

    form.loadRecord(record);
    view.down('button[action=save]').on('click', function(btn) {
        var rec = form.getRecord(),
            values = form.getValues();

        rec.set(values);
        view.close();
    });
});