javascript - EXTjs getEl() 在显示元素之前失败

Question

大家好。

在 EXTjs(可能是 4.x 版本)中，我有一个带有几级子菜单的菜单 我想向其中一些子菜单添加数据属性，实际上我可以毫无问题地执行此操作: Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 4});

但这仅适用于菜单的第一个元素(需要明确的是，加载时显示的元素。 对于菜单的任何其他元素，首先我必须单击菜单以显示所有子菜单，只有那时我才能使用 getEl() 函数，否则会显示此错误: 未捕获的类型错误:无法读取未定义的属性“集”

我知道我需要...展示？使成为？好吧，对这些子元素“做一些事情”，以便将它们正确地放入 dom 中......我附上部分代码:

这是我创建的菜单的一部分:

xtype: 'button',
            id:"notificationMenu",
            hidden: false,              
            reference: 'userType',
            style: 'color: #ffffff;width:58px;height:58px;',
            glyph: 0xf0f3,
            menu:{
                border:0,
                menuAlign: 'tr-br?',
                bodyStyle: {
                    background: '#3e4752',
                },
                items:[
                {
                    text:"TASKS",
                    disabled:true
                },
                {
                    text:"Campaigns",
                    data_id:"me_campaigns",
                    glyph:0xf0c1,
                    id:"notification_me_campaigns_root",
                    hidden:true,
                    menu:{
                        border:0,
                        menuAlign: 'tr-br?',
                        bodyStyle: {
                            background: '#3e4752',
                        },
                        items:[
                        {
                        text:"Approval",...

在这个例子中，如果我在渲染之后进行:

Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10})

但是如果我使用

Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4})

显示了上面的错误。请问你有什么建议吗？我可以以某种方式调用“强制渲染”吗？

Answer 1

Try to use afterrender to get dom element.

ExtJs getEl()检索表示此组件的顶级元素，但在 dom 时工作准备无 dom创建它将返回 null。

我创建了一个Sencha Fiddle演示希望这将帮助您实现您的要求/解决方案。

var panel = new Ext.panel.Panel({
            renderTo: document.body,
            title: 'A Panel',
            width: 200,
            tools: [{
                xtype: 'button',
                text: 'Foo',
                menu: {
                    defaults: {
                        handler: function () {
                            Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
                        }
                    },
                    items: [{
                        text: 'Item 1'
                    }, {
                        text: 'Item 2',
                        menu: {
                            listeners: {
                                afterrender: function () {
                                    this.getEl().set({
                                        "data-notifynumber": 20//only for example you can put as basis of your requirement
                                    });
                                }
                            },
                            defaults: {
                                handler: function () {
                                    Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
                                }
                            },
                            items: [{
                                text: 'Sub Item 1',

                            }, {
                                text: 'Sub Item 2'
                            }]
                        }
                    }],
                    listeners: {
                        afterrender: function () {
                            this.getEl().set({
                                "data-notifynumber": 10//only for example you can put as basis of your requirement
                            });
                        }
                    }
                }
            }]
        });