Question

我有一个非常简单的extjs网格。（Extjs 5.1.1）我的问题：当我双击其中一行时，如果我想要一个简单的表格。但我不知道怎么做。如果我修改其中一个字段而不是运行更新的后台。（http://users/update）表单将JSON数据发送到后端。

我的代码:(阅读没问题）

var Users = {
    init: function() {
        itemdblclick: this.editDocument
    },

    edit: function(grid, roWindex, e) {
        var id = grid.getStore().getAt(rowIndex);
        Users.openEditForm(id);
    },

    openEditForm: function(id) {
        // form open
    }
};

Users.init();

Ext.application({
    name: 'Users',
    launch: function() {
        Ext.widget({
            renderTo: Ext.getBody(),
            xtype: 'grid',
            title: 'Users',
            height: 800,
            store: {
                fields: ['login_id',
                    'login_name',
                    'login_firstname',
                    'login_middlename',
                    'login_lastname',
                    'login_email',
                    'login_mobile',
                    'login_status'
                ],
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    api: {
                        read: 'http://users/select',
                        create: 'http://users/insert',
                        update: 'http://users/update',
                        destroy: 'http://users/delete'
                    },
                    reader: {
                        type: 'json',
                        successProperty: 'success',
                        root: 'data',
                        messageProperty: 'message'
                    },
                    writer: {
                        type: 'json',
                        writeAllFields: false,
                        root: 'data'
                    }
                }
            },
            columns: {
                items: [{
                    text: 'ID',
                    dataIndex: 'login_id',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Login Name',
                    dataIndex: 'login_name',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Firstname',
                    dataIndex: 'login_firstname',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Middlename',
                    dataIndex: 'login_middlename',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Lastname',
                    dataIndex: 'login_lastname',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Email',
                    dataIndex: 'login_email',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Mobile',
                    dataIndex: 'login_mobile',
                    editor: 'textfield',
                    width: 200
                }, {
                    text: 'Status',
                    dataIndex: 'login_status',
                    editor: 'textfield',
                    width: 200
                }]
            },
            listeners: {
                itemdblclick: function(dv, record, item, index, e) {
                    // This is row index
                    alert(index);
                }
            }
        })
    }
});

Answer 1

使用Ext.grid.plugin.RowEditing插件。请参阅this example how。

Answer 2

有几种方法可以做到这一点。

试试这个：

Ext.define('App.view.Window', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    closable: false,
    title: 'myWindow',
    height: 600,
    width: 800,
    frame: false,
    maximizable: true,
    autoScroll: true,
    minHeight: 200,
    modal: true,
    closeAction: 'hide',

    buttons: [{
        text: 'Close',
        handler: function(button, e, options) {
            button.up('mywindow').close()
        }
    }]
});

listeners: {
    itemdblclick: function(grid, record, item, index, e, eOpts) {
        Ext.widget('mywindow').show();
    }
}

Answer 3

解决方案很简单。我写了一个函数：

openWindow = function(record) {
    var panel = new Ext.form.Panel( {
        renderTo: document.body,
        title: 'Users',
        height: 400,
        width: 400,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'Login',
                name: 'login_name', 
                value: record.data.login_name
            },
            {
                fieldLabel: 'Firstname',
                name: 'login_firstname',
                value: record.data.login_firstname
            }
        ]
    });

    var window = new Ext.Window({
        id     : 'window',
        height : 400,
        width  : 400,
        items  : [panel]
    });

    window.show();   
}

我的听众：

listeners: {
    celldblclick: function(table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        openWindow(record);
    }
}

Extjs GRID和表单

3 个答案: