javascript - ExtJS:将工具放到标题栏上

Question

我之前已经能够将工具放入窗口标题栏中，但希望能够对面板执行相同的操作。

这是我的尝试:

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

一些建议将不胜感激

张杰

Answer 1

之前的帖子是正确的，但我想我会解释为什么你做的是错的。

您正在完全重新定义正在创建的对象中 Ext.Panel 的 initComponent 方法，默认的 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();