添加/插入Ext.ToolBar的工具栏项目未显示在页面上

Question

我有一个扩展面板的自定义组件。 面板有一个带有基本配置的顶部工具栏。 我希望能够在创建项目后动态添加项目。

这些项目应始终位于主菜单项集的末尾，并且在将注销按钮推到最右侧的填充符之前，因此我编写了insertMenuItem函数来获取“shunt”（tbfill）项的位置和在此位置插入新工具栏项。 如果它没有找到“分流”，因为它被覆盖了，它只是添加到工具栏的末尾。

这似乎工作得很好。 如果我查看“live”contentPanel，我可以看到插入的菜单项。 让它显示出来的问题。 现在我怀疑这是一个范围问题，我只是不确定是什么，在哪里，何时，如何....：

我在函数中尝试了this.doLayout（），topToolbar.doLayout（），在调用我的函数后，我在contentPanel对象上得到了一个doLayout（），但它们似乎都没有帮助。

救命！ ;-D

下面是我的扩展Panel类。 在此先感谢您的帮助

斯蒂芬

SOM.ux.contentPanel = Ext.extend(Ext.Panel, {
     autoScroll:true
    ,initComponent:function() {
        var config = {
             plugins:['dispatcher']
            ,contentEl : Ext.get('som-body')
            ,tbar:{
                     itemId:'contenttoolbar'
                    ,items:[
                {
                    xtype : 'button',
                    text: 'Dashboard',
                    handler: function(){
                        document.location.href = '/'
                    }
                },{itemId:'shunt',xtype: 'tbfill'},{
                    xtype : 'button',
                    text: 'Logout',
                    handler: function(){
                        document.location.href = '/admin.login.doLogout'
                    }
                },{
                        xtype : 'tbbutton',
                        text: 'Message',
                        scope: this,
                        handler: function(){
                            this.publish('SOM.ux.Dashboard',{action:'doHelloWorld',params:{name:'Stephen'}});
                        }
                    }
                ]
            }

        }; // end of config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        SOM.ux.contentPanel.superclass.initComponent.apply(this, arguments);
    }
    ,afterRender: function(){
        this.subscribe('SOM.ux.Toolbar');
        SOM.ux.contentPanel.superclass.afterRender.call(this);
    }
    ,onDispatchMessage: function(subject,message) {
        if (message.action) {
            this[message.action].call(this,message.params);
        }       
        console.log('contentpanel doDispatch',subject,message);
    }
    ,insertMenuItem: function(itemObj){
        var topToolbar = this.getTopToolbar();
        var aItems = topToolbar.items;
        var insertPos = aItems.indexOfKey('shunt');
        if (insertPos) {
            console.log('using insert');
            topToolbar.insert(insertPos,itemObj);
        } else {
            console.log('using add');
            topToolbar.add(itemObj);
        }
        this.getTopToolbar().doLayout();
    }

Answer 1

以下作品：

var tb = new Ext.Toolbar({
    items : [{text : 'wtf'}]
});

new Ext.Window({
    width : 300,
    height : 100,
    tbar : tb
}).show();

(function() {
    tb.add({text:'new btn'});
    tb.doLayout()
}).defer(1500);

要添加到jonathan的注释，只需在渲染后调用doLayout。

Answer 2

确保在工具栏渲染后调用insertMenuItem 。 itemObj （param）是Ext.Toolbar.Item配置吗？