如何在 afterrender 事件 Ext JS 中获取标题标签元素？

Posted 2023-02-26

【中文标题】如何在 afterrender 事件 Ext JS 中获取标题标签元素？

【英文标题】：How to get header tag element in afterrender event Ext JS?

【发布时间】：2018-01-02 18:51:18

【问题描述】：

var menuItem1 = new Ext.Panel(
   id: 'panelStart',
   title: 'Start',
   html: 'This is the start page.',
   cls:'menuItem',
   headerCfg: 
      tag: 'div',
      cls: 'title-part'              
      ,
    listeners: 
        afterrender: function (comp) 
            var element = comp.getEl();
            element.on('click', function() 
                alert('ok')
            );
        
    
);

 

这里我们可以轻松访问组件的dom节点，但是如何在afterrender函数中获取headerCfg的div dom元素？

【参考方案1】：

ExtJS 4+

面板标题是Ext.panel.Header 类的实例，因此您可以像这样简单地使用down() 方法：

afterrender: function (panel) 
    var header = panel.down('header'),
        headerElement = header.getEl();
    headerElement.on('click', function () 
        alert('ok');
    );

这里是fiddle。

ExtJS 3

您可以使用面板的header 属性，例如panel.header.getEl()。

【讨论】：

没有注意到 ExtJS3 标签，对于这个版本我相信你可以使用comp.header.getEl() - 检查这个docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel-property-header

使用 comp.header 获取头部 dom 节点。

谢谢@Sergey Novikov！