extjs 4 - How to add a different event listener for PropertyGrid? PropertyGrid's addListener/on function not executing

Question

Apologies for the long title. Basically, I want to add a keydown event listener to my propertyGrid. I've been looking online for possible solutions but I haven't been lucky.

I have a property grid defined as such:

{
    xtype: 'propertygrid',
    x: 570,
    y: 210,
    id: 'pfGridPanelMode',
    itemId: 'pfGridPanelMode',
    maxWidth: 200,
    minWidth: 200,
    width: 200,
    frameHeader: false,
    header: false,
    title: 'Payment Mode',
    scroll: 'none',
    sealedColumns: true,
    sortableColumns: false,
    source: {
        Cash: '',
        Check: '',
        Total: ''
    }
}

I know I can use the propertychange event listener and get the recordID and the newValue . However, I want the keydown event so that when the user fills up the Cash and Check fields, I can update the Total field live.

I've checked the other event binding names and I saw cellkeydown , however, it does not seem to work when I added it in my controller as such:

onPropertygridCellkeydown: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            console.log("cell key down fired");

            console.log("cellIndex " + cellIndex);
            console.log("rowIndex " + rowIndex);

}
. . . . . . . 

"#pfGridPanelMode": {
            cellkeydown: this.onPropertygridCellkeydown
            //I have other event listeners here
 },

I've tried clicking and entering values in the cells but to no avail.

I then checked the extjs4 docs from sencha and I saw the add listener method of the grid panel. I tried the example of adding a mouseover listener but to no avail. I tried putting the code on the beforerender and the afterrender events like so: (please note that this function is in my controller)

onPropertygridBeforeRender/onPropertygridAfterRender: function(component, eOpts) {
    var form = Ext.getCmp('processingFeeRecieptPanel');
    var receipt1 = form.child('#receipt1');
    var mode = receipt1.child('#pfGridPanelMode');

    mode.addListener("mouseover", this.onMouseOver, this);
    mode.on({
        mouseover: this.onMouseOver
    });
}

and I have the onMouseOver event like so:

onMouseOver: function() {
    console.log("on mouse over called");
}

However, that too does not work - the log does not show up.

Does anyone have a solution for this? I want a keydown listener so that the updates are live. I know I can use the propertychange listener but I am aiming for a better user experience overall.

Thank you for any help and sorry for the long post.

Answer 1

Add this to your grid:

listeners: {
    afterrender : function(grid) {
        grid.el.dom.addEventListener('keypress', function (e) {
            Ext.defer(function(){
                console.log(e.srcElement.value);
            },10);
        });
    }
}

Answer 2

Here's how I made it work. The basic idea is to make a textField inside the source using sourceConfig and the editor method. This textField is then given a listener for keyup event (or any event that you want). You can then do anything you want inside that listener. For my case, I called a controller to calculate a total value that I need.

Here is my source :

source: {
    "Cash": 0,
    "Check": 0,
    "Total": 0
}

Here's my sourceConfig :

sourceConfig: {
    Cash:{
        editor: Ext.create(
            'Ext.form.field.Text',
            {
                selectOnFocus: true,
                enableKeyEvents: true,
                listeners: {
                    keyup : function(textfield, e, eOpts) {
                        console.log("cash value change new value is = " + textfield.getValue());
                        myAppName.app.getController('PFReceipt').computeTotal('cash', textfield.getValue());

                    }
                }

            }

        ),
        type:'number'
    },
    Check:{
        editor: Ext.create(
            'Ext.form.field.Text',
            {
                selectOnFocus: true,
                enableKeyEvents: true,
                listeners: {
                    keyup : function(textfield, e, eOpts) {
                        console.log("cash value change new value is = " + textfield.getValue());
                        myAppName.app.getController('PFReceipt').computeTotal('check', textfield.getValue());

                    }
                }

            }

        ),
        type:'number'
    },

}