ExtJS: поместите инструменты в строку заголовка

Question

Ранее я мог помещать инструменты в заголовки окон, но хотел бы иметь возможность сделать то же самое с Panel.

Это была моя попытка:

panel = new Ext.Panel({
    id: 'my_panel',
    region: 'west',
    title:'MyTitle',
    iconCls:'helpIcon', 
    initComponent:function(){
        var config = {
            tools:[{
                id: 'gear',
                handler:  function(){...}
            }]
        };
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);          
        Ext.Panel.superclass.initComponent.apply(this, arguments);
    }           
}

Некоторые советы будут очень признательны

JJ

Answer 1

Вы, кажется, смешались со многими вещами в вашем коде.Похоже, вы пытаетесь расширить панель и использовать свойство region.Свойство region используется для макета границы.

вот как:

 panel = new Ext.Panel({ 
    id: 'my_panel', 
    title:'MyTitle',
    iconCls:'helpIcon', 
    tools:[{        
        id: 'gear', 
        handler:  function(){...}     
    }]
}); 

Если вам нужно расширить, вам придется использовать метод Ext.extend ().*

Answer 2

Предыдущие сообщения верны, но я подумал, что объясню, почему то, что вы делаете, неправильно.

Вы полностью переопределяете метод initComponent для Ext.Panel в объекте, который вы создаете, и по умолчанию Ext.Panel.initComponent необходимо запустить, чтобы настроить такие вещи, как tools.

В вашем коде, когда вы звоните Ext.Panel.superclass.initComponent, вы звоните Ext.BoxComponent.initComponent, а не существующий Ext.Panel.initComponent.

Чтобы сделать специальные initComponent вещи, а затем вызвать до Ext.Panel.initComponent, вам нужно создать расширение Ext.Panel:

MyPanelClass = Ext.extend(Ext.Panel, {
    id: 'my_panel',
    region: 'west',
    title:'MyTitle',
    iconCls:'helpIcon', 
    initComponent:function(){
        var config = {
            tools:[{
                id: 'gear',
                handler:  function(){...}
            }]
        };
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);          
        MyPanelClass.superclass.initComponent.apply(this, arguments);
    }

});

А потом позже:

var mypanel = new MyPanelClass();

Answer 3

Вы почти у цели.

panel = new Ext.Panel({
    id: 'my_panel',
    region: 'west',
    title:'MyTitle',
    iconCls:'helpIcon', 
    tools:[{
        id: 'gear',
        handler:  function(){...}
    }]
};