Question

在ExtJS 5+中，您可以使用“ focusable”和“ tabIndex”参数来使Ext.panel.Panel对象触发焦点/模糊事件，如链接的5.1提琴中所示。链接的4.2小提琴尝试相同的行为，并且不起作用。

https://fiddle.sencha.com/#fiddle/1fbf&view/editor（5.1小提琴）

https://fiddle.sencha.com/#fiddle/2ob6&view/editor（4.2小提琴）

在ExtJS 4.2中是否有很好的方法来做到这一点？

我的示例代码（与小提琴相同）如下：

Ext.application({
name: 'Fiddle',

launch: function () {
    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Focus Panel',
        height: 300,
        width: 400,

        // Key attributes
        focusable: true,
        tabIndex: 1,
        /////////////////

        html: 'BLURRED',
        listeners: {
            focus: function () {
                this.setHtml('FOCUSED');
            },

            blur: function () {
                this.setHtml('BLURRED');
            }
        }
    });
    var panel2 = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Focus Panel 2',
        height: 300,
        width: 400,

        // Key attributes
        focusable: true,
        tabIndex: 2,
        /////////////////

        html: 'BLURRED',
        listeners: {
            focus: function () {
                this.setHtml('FOCUSED');
            },

            blur: function () {
                this.setHtml('BLURRED');
            }
        }
    });
}
});

我尝试了以下方法：

1）直接使用面板的模糊/聚焦事件。这就是我在这里特别要问的。

2）使用panel html属性创建div，然后使用div的onblur属性将事件直接分配给div。

3）将焦点和模糊事件委派给div。这对单击事件有效，但对焦点或模糊事件无效。

4）我最成功的方法是使用click事件将div替换为显示面板HTML纯文本的输入字段。编辑完成后，我便可以使用输入字段blur事件来逆转过程，并直接在面板中显示HTML。这种工作-但是输入字段仅显示纯文本...

5）我可以在面板中放置一个富文本编辑器，也许可以从中获取焦点/模糊事件，但是接下来我还有很多其他问题需要解决，首先是我确实不愿意RTF编辑器的工具栏没有空间。

ExtJS 4 Panel Focus / Blur事件未触发

0 个答案: