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
                            });
                        }
                    }
                }
            }]
        });