Question

为长标题道歉。基本上，我想在我的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听众，但我的目标是提供更好的用户体验。

感谢您的帮助，感谢抱歉。

Answer 1

将此添加到您的网格中：

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

Answer 2

这就是我如何运作的方式。基本思想是使用source和sourceConfig方法在editor内部创建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'
    },

}

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

2 个答案: