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(){...}
    }]
};

ExtJS：将工具放到标题栏上

3 个答案: