ExtJS: Put tools onto the title bar

I have been able to put tools into window title bars before, but would like to be able to do the same thing to a Panel.

This was my attempt:

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

Some ad开发者_运维知识库vice would be greatly appreciated

JJ

---

The previous posts are correct, but I thought I would explain why what you are doing is wrong.

You are completely redefining the initComponent method of Ext.Panel in the object you are creating, and the default Ext.Panel.initComponent needs to run in order to setup things like tools.

In your code, when you call Ext.Panel.superclass.initComponent, you are calling Ext.BoxComponent.initComponent, not the existing Ext.Panel.initComponent.

In order to do special initComponent things, and then call up to Ext.Panel.initComponent, you need to create an extension of 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);
    }

});

And then later:

var mypanel = new MyPanelClass();

---

You seems to have mixed up with many things in your code. You seems to be trying to extend the panel and use region property. The region property is used for border layout.

here is how:

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

If you need to extend you will have to use the Ext.extend() method.

---

You are almost there.

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