Элементы панели инструментов, добавленные / вставленные в Ext.ToolBar, не отображаются на странице

Question

У меня есть пользовательский компонент, расширяющий панель. Панель имеет верхнюю панель инструментов с базовыми настройками. Я хочу иметь возможность динамически добавлять элементы на панель после ее создания.

Эти элементы всегда должны находиться в конце основного набора пунктов меню и перед заполнителем, который нажимает кнопку выхода из системы в крайнем правом положении, поэтому я написал функцию insertMenuItem, чтобы захватить позицию «шунта» (tbfill ) и вставьте новый элемент панели инструментов в это место. Если он не находит «шунт», потому что он был переопределен, он просто добавляет в конец панели инструментов.

Кажется, это работает просто замечательно. Если я смотрю на «живую» панель контента, я вижу вставленный пункт меню. Проблема заключается в том, чтобы заставить его отображать. Теперь я подозреваю, что это проблема сферы охвата, я просто не уверен, что, где, когда, как ....: |

Я пробовал this.doLayout (), topToolbar.doLayout () в функции У меня есть doLayout () для объекта contentPanel после вызова моей функции, но ни один из них, похоже, не помогает.

HELP! ; -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);

Чтобы добавить комментарий Джонатана, вызывайте doLayout только после того, как он отрендерен.

Answer 2

Убедитесь, что вы звоните insertMenuItem после на панели инструментов. Является ли itemObj (параметр) конфигурацией Ext.Toolbar.Item?