extjs 4 - 如何为 PropertyGrid 添加不同的事件监听器？ PropertyGrid 的 addListener/on 函数未执行答案

【问题标题】：extjs 4 - How to add a different event listener for PropertyGrid? PropertyGrid's addListener/on function not executingextjs 4 - 如何为 PropertyGrid 添加不同的事件监听器？ PropertyGrid 的 addListener/on 函数未执行
【发布时间】：2014-11-02 03:30:12
【问题描述】：

为长标题道歉。基本上，我想向我的 propertyGrid 添加一个keydown 事件侦听器。我一直在网上寻找可能的解决方案，但运气不佳。

我有一个这样定义的属性网格：

{
    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: ''
    }
}

我知道我可以使用propertychange 事件侦听器并获取recordID 和newValue。但是，我想要 keydown 事件，这样当用户填写 Cash 和 Check 字段时，我可以实时更新 Total 字段。

我检查了其他事件绑定名称并看到了cellkeydown，但是，当我将它添加到我的控制器中时，它似乎不起作用：

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
 },

我尝试在单元格中单击并输入值，但无济于事。

然后我检查了 sencha 的 extjs4 文档，我看到了网格面板的 add listener method。我尝试了添加mouseover 侦听器的示例，但无济于事。我尝试将代码放在beforerender 和afterrender 事件上，如下所示：（请注意这个函数在我的控制器中）

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

我有这样的onMouseOver 事件：

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

但是，这也不起作用 - 日志不显示。

有人对此有解决方案吗？我想要一个 keydown 监听器，以便实时更新。我知道我可以使用propertychange 监听器，但我的目标是总体上获得更好的用户体验。

感谢您的帮助，很抱歉发了这么长的帖子。

【问题讨论】：

标签： javascript extjs extjs4 extjs4.2

【解决方案1】：

将此添加到您的网格中：

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

【讨论】：

嗯.. 我猜它是 Ext 4.2.1 和 4.2.2 的错误。我用一个不太优雅的解决方案更新了我的解决方案。
抱歉，我找到了不同的解决方案，但我忘了把答案放在这里。我会尝试检查您的编辑并发布反馈。

【解决方案2】：

这是我如何使它工作的。基本思想是使用sourceConfig 和editor 方法在source 内创建一个textField。然后为这个 textField 提供keyup 事件（或您想要的任何事件）的侦听器。然后，您可以在该侦听器中做任何您想做的事情。就我而言，我调用了一个控制器来计算我需要的总值。

这是我的source：

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

这是我的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'
    },

}

【讨论】：