keyup, keypress event not fire in extjs grd column

1.2k Views Asked by At

This my Grid column

MyColumn3Ui = Ext.extend(Ext.grid.NumberColumn, {
    constructor: function(cfg) {
        cfg = cfg || {};
        MyColumn3Ui.superclass.constructor.call(this, Ext.apply({
            dataIndex: 'ID',
            header: 'name',
            sortable: true,
            width: 75,
            align: 'right',
            id: 'name_col',
            editor: {
                xtype: 'numberfield',
                name: 'ID',
                decimalPrecision: 0,
                allowDecimals: false,
                enableKeyEvents: true,
                allowBlank: false,
                maxLength: 5,
                id: 'col_id'
            }
        }, cfg));
    }
});

This what i try to fire keyup and keypress event

 this.col = Ext.getCmp('col_id');
 this.col.blur = blurFun .createDelegate(this, [this.col, 4,""]);
 this.col.keyup = keyupFun.createDelegate(this, [this.col, 4,""]);
 this.col.keypress = keypressFun .createDelegate(this, [this.col, 4,""]);

 blurFun = function(txtField, length, nextField ) {
    alert('blur');
 }
 keyupFun= function(txtField, length, nextField ) {
    alert('keyup ');
 }
 keypressFun = function(txtField, length, nextField ) {
    alert('keypress');
 }

when i click on name column only show blur alert. others event not fire in my editable ExtJs grid. what i want to for fire keyup, keypress event in my grid column

2

There are 2 best solutions below

2
On

To add event listeners to a component, use the on function:

this.col.on({
    'blur': function(field) {
        alert('blur');
    },
    scope: this
});
0
On

col model don't have event like keyup. keyup event fire in the editor

this.col.keyup = keyupFun.createDelegate(this, [this.col, 4,""]); 

change to

 this.col.editor.keyup = keyupFun.createDelegate(this, [this.col.editor, 4,""]);