Question

我想创建一个继承自我的基础对象的组件，tabpanel，treepanel或gridpanel，这个基础对象从Ext.container.Container扩展，然后将配置参数传递给它。我怎么能做到这一点？

我已尝试如下，它不会工作。

Ext.define('MyProj.base.Component', {
extend: 'Ext.container.Container',
requires:[
    'Ext.tab.*',
    'Ext.tree.*',
    'Ext.grid.*',
    'Ext.form.*',
    'Ext.data.Store'
],

//Position, Size, CSS decoration
layout: 'accordion',
//region: '',
width: null,
height: null,
//html: '&#160;',
//bodyPadding: null,

//Operation
collapsible: true,
closable: false,
draggable: false,
floatable: true,
autoScroll: true,

//Data
store: null,
//items: null,

initComponent : function(){
    var me = this;

    me.callParent(arguments);
},

constructor: function(cfg, defaultType){
    var me = this;
    me.xtype = 'tabpanel';
    me.defaultType = defaultType;
    me.baseCls = Ext.baseCSSPrefix+defaultType;
    me.componentCls = Ext.baseCSSPrefix+defaultType;
    Ext.apply(me, cfg || {});

    me.callParent();
}


});

Answer 1

这不是您创建组件的方式。

首先，选项卡面板，网格和树面板都继承自Ext.container.Container。因此，您不得扩展该类，而是扩展其中一个子类。

然后，您不能像以前一样使用constructor。

不幸的是，你根本不清楚自己想要达到的目标。我想你想要创建一个带有两个标签的标签面板，一个带有网格，另一个带有树或类似的标签。

您可以使用以下代码实现此目的：

Ext.define('MyProj.base.Component', {
    extend: 'Ext.tab.Panel',
// layout: 'accordion' 
// a tab panel cannot have an accordion layout 
    items: [{
        xtype: 'grid', 
        ... 
    }, {
        xtype: 'treepanel', 
        ... 
    }], 
    collapsible: true,
    closable: false,
    draggable: false,
    floatable: true,
    autoScroll: true,

}）

我希望这可以帮助您更接近按照预期的方式使用框架。

如果我没有得到您想要做的事情，那么请尝试重新表述您的问题，以便更清楚。

修改

根据您的解释（您给出了答案，同时删除了），您尝试创建一个可以返回任何组件的函数。没有理由你实现这个。

如果你有特殊的MyProj.base.TabPanel并且想要实例化，则必须使用Ext.widget。您将向组件添加alias，例如

Ext.define('MyProj.base.TabPanel', { extend: 'Ext.tab.Panel', alias: 'widget.myproj-tab'

然后，您可以使用xtype: 'myproj-tab'在任何位置引用此组件，并使用Ext.widget('myproj-tab')创建一个实例。这个功能只会做你想要达到的目的。没有必要重新发明轮子。它已经内置。

我怎么能用这种方式创建一个组件？

1 个答案: