简体   繁体   中英

Ext Js Grid, How to get the value of cell on keyup?

I'm using Ext Js v6.2 Grid, In my application, I need to get the value of the cell on keyup Here my code, I've tried but it doesn't return the value,please correct my code if I'm wrong, I've searched in documentation and other stuff it doesn't help.please solve the problem. Thanks in advance.

Update Code

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

You need to add the event by referencing the el element.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM