在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）使用面板html属性创建div，并使用div的onblur属性直接将事件分配给div .

3）将焦点和模糊事件委托给div . 这适用于click事件，但不适用于focus或blur事件 .

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

5）我可以在面板中放置一个富文本编辑器，我可能会从中获得焦点/模糊事件，但随后我还有一大堆其他问题需要解决，从我真的没有这个事实开始富文本编辑器工具栏的空间 .

javascript extjs4 panel onblur onfocus