Ext Js Grid,如何在keyup上获取cell的值?

时间:2017-08-09 12:59:16

标签: javascript extjs extjs-grid

我正在使用Ext Js v6.2网格,在我的应用程序中,我需要在keyup上获取单元格的值在这里我的代码,我已经尝试但它没有返回值,请更正我的代码如果我错了,我在文档和其他东西中搜索它没有帮助。请解决问题。提前谢谢。

更新代码

    Ext.define('MisCharge', {
                    extend: 'Ext.data.Model',
                    fields: [
                        {name: 'name', mapping: 'name'},
                        {name: 'age', mapping: 'age'},
                        {name: 'marks', mapping: 'marks'}
                    ]

                });
            }


// Store data
            var myData = [
                {name: "Container Cost"},
                {name: "Packaging Cost  "},
                {name: "Handling Charges "},
                {name: "Service Cost of Buyer "},
                {name: "Documentation"},
                {name: "Cntry of origin Cert."},
                {name: "Royalties"},
                {name: "Value of Proceeds"},
                {name: "Warranty Services"},
                {name: "Seller Obligation"},
                {name: "Other Charges"},
            ];
            // Creation of first grid store
            var gridStore1 = Ext.create('Ext.data.Store', {
                model: 'MisCharge',
                data: myData,
            });
            // Creation of first grid
            var gridStore = Ext.create('Ext.grid.Panel', {
                cls: 'custom-grid',
                id: 'gridId',
                store: gridStore1,
                stripeRows: true,
                width: '100%',
                collapsible: false,
                enableColumnMove: false,
                columnLines: true,
                sortableColumns: false,
                enableColumnHide: false,
                enableColumnResize: false,
                enableRowHeightSync: true,
                columns:
                        [{
                                header: "Charges",
                                dataIndex: 'name',
                                id: 'charge',
                                width: 200,
                                height: 20,
                                flex: 1

                            },
                            {
                           editor: {
                           xtype: 'textfield',
                           enableKeyEvents: true,
                           listeners: {
                           keyup: function (form, e) {
                           var sel_model = gridStore.getSelectionModel(); 
                           var record = sel_model.getSelection()[0];
                           alert(record);
                                        }
                                    }

                                },
                                header: "Rate%",
                                dataIndex: 'age',
                                flex: 1,
                                sortable: true,
                                height: 20,
                                hideable: false,
                            },
                            {
                                editor: {
                                    xtype: 'textfield',
//                                    selectOnFocus: true
                                },
                                header: "Amount()",
                                dataIndex: 'marks',
                                flex: 1,
                                height: 20,
                                sortable: true,
                            }],
                selType: 'cellmodel',
                plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        clicksToEdit: 1
                    })]
            });

1 个答案:

答案 0 :(得分:2)

您需要通过引用el元素来添加事件。

editor: {
        xtype: 'textfield',
        enableKeyEvents: true,
        listeners: {
            keyup: {
                element: 'el',
                fn: function (a, b) {
                    var record = gridStore.getSelectionModel().selected.items[0].data
                    alert(record);
                }
            }
        }
    }