Question

美好的一天。

在EXTjs中，可能是4.x版本，我有一个菜单，有几个级别的子菜单我想在其中一些子菜单中添加一个数据属性，实际上我可以做到这一点，没有任何问题： Ext.getCmp（“notificationMenu”）。getEl（）。set（{“data-notifynumber”：4}）;

但这仅适用于菜单的第一个元素（要清楚，加载时显示的元素）。对于菜单的任何其他元素，首先我必须单击菜单以显示所有子菜单，并且仅在那时我可以使用getEl（）函数，否则显示以下错误：未捕获的TypeError：无法读取未定义的属性“set”

我明白我需要......表演？呈现？好吧，为那些子元素“做点什么”，以便将它们妥善地放在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

尝试使用afterrender获取dom元素。

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

在显示元素之前，EXTjs getEl（）失败

1 个答案: