S Dhanissh
S Dhanissh

Reputation: 99

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

Upvotes: 1

Views: 932

Answers (1)

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

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

Upvotes: 2

Related Questions