Extjs GRID和表格

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插件。 如何看這個例子 。

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