Extjs 扩展Ext.panel.panel的正确方法？

我正在使用ExtJS4.1.1为网页创建GUI。我尝试创建一个组件（“下面的GeneSearchComponent”），我可以在更复杂的布局中使用它。但由于某些原因，我无法将“GeneSearchComponent”的实例插入hpanel。扩展预定义的“Ext.panel.panel”类（以及创建自己的“小部件”）时，我缺少什么

如果我删除对“

Ext.create（'gene-search-component'，…

”的调用，一切都会正常工作；如果我把它放回去，一切都会中断。我想知道为什么

（我没有包括“基因组合框”的定义。我非常确信这不是我问题的根本原因。）

谢谢你的时间

托马斯

Ext.define（'GeneSearchComponent'{
扩展：“Ext.panel.panel”，
别名：['gene-search-component']，
构造函数：函数（cnfg）{
this.callParent（参数）；
this.initConfig（cnfg）；
},
配置：{
可折叠的：是的，
框架：对，
标题：“搜索”，
车身衬垫：“15”，
宽度：350，
布局：{
键入：“vbox”，
对齐：“左”
},
项目：[
Ext.widget（'gene-combobox'{
id:'comboboxid'
}),
Ext.create（'Ext.Button'{
文本：“搜索”，
处理程序：函数（）{
dosomething（）；
}})]
},
onRender:function（）{
this.callParent（参数）；
}
});
外部应用程序({
名称：“FW”，
启动：函数（）{
var bd=Ext.getBody（）；
var div=Ext.get（“搜索表单”）；
var hpanel=Ext.create（'Ext.panel.panel'{
id:'水平面板'，
标题：“HBoxLayout面板”，
布局：{
类型：“hbox”，
对齐：“中间”
},
项目：[
Ext.create（'Ext.container.container'{
id:“另一个面板”，
标题：“VBoxLayout面板”，
宽度：250，
布局：{
键入：“vbox”，
对齐：“左”
},
项目：[{
xtype:'面板'，
宽度：250，
标题：“第一小组”，
弹性：2
},{
xtype:'面板'，
宽度：250，
标题：“第二小组”，
弹性：1
},{
xtype:'面板'，
宽度：250，
标题:"第三小组",，
弹性：1
}]}),
Ext.create（'gene-search-component'{
id:“搜索面板”，
})],
renderTo:分区，
});
}
});

问题在于，在配置其别名时，您没有为

基因搜索组件

提供

小部件

名称空间

alias: 'widget.gene-search-component'

此外，为了回应OP上的注释，您正在以自己的方式进行大量不必要的键入创建组件。您应该使用xtype字段，而不是使用Ext.Create everywhere。我已经修改了您的代码，以向您展示它有多简单

---

为什么要为

GeneSearchComponent

定义自定义的

构造函数呢？还有，为什么要使用
Ext.widget
和
Ext.create
，而你可以使用
xtype
？虽然不确定，但这些可能是问题的根源。lzhaki，如果我删除构造函数，javascript引擎不再抱怨“未捕获的TypeError:对象#没有方法'setOwner'。"但是，省略它会影响组件的呈现方式。就xtype、Ext.widget和Ext.create而言，我认为它们或多或少是等价的。您能否详细说明省略构造函数会产生什么影响？此外，在中使用
Ext.create
还是“惰性实例化”也很重要g
xtype
，但是它背后的解释很复杂，我建议您从阅读开始。另外，为什么您要定义
config:
，而不仅仅是将configs作为configs提供（即，在
config:
块之外）？lzhaki，如果我不使用构造器，GeneSearchComponent的宽度将几乎占到页面的100%，带有“搜索”文本的蓝色“标题”将消失。我将阅读您链接到的页面。就配置而言，我主要是复制我在网上读到的内容。这不是一个完全有意识的选择。：-）非常感谢！我能让它工作。我很欣赏你代码的简单性。lzhaki和Jamie，谢谢你花时间来做这件事。希望有一天我能报答你的恩惠。