扩展 Ext.panel.Panel 的正确方法

Question

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

如果我删除对" Ext.create('gene-search-component', ... "的调用，一切正常;如果我把它放回去，一切都会破裂。我想知道为什么。

（我没有包括"基因组合框"的定义。我很确信这不是我问题的根本原因。

谢谢你的时间！

图托马斯

Ext.define('GeneSearchComponent', {
    extend: 'Ext.panel.Panel',
    alias: ['gene-search-component'],
    constructor: function(cnfg) {
        this.callParent(arguments);
        this.initConfig(cnfg);
    },
    config: {
        collapsible: true,
        frame: true,
        title: 'Search',
        bodyPadding: '15 15 15 15',
        width: 350,
        layout: {
            type: 'vbox', 
            align: 'left'
        },
        items: [
            Ext.widget('gene-combobox', {
                id: 'comboboxid'
            }),
            Ext.create('Ext.Button', {
                text: 'Search',
                handler: function() {
                    dosomething();
        }})]
    },
    onRender: function() {
        this.callParent(arguments);
    }
});
Ext.application({
    name: 'FW',
    launch: function() {
        var bd = Ext.getBody();
        var div = Ext.get("search_form");
        var hpanel = Ext.create('Ext.panel.Panel', {
            id: 'horizontal-panel',
            title: "HBoxLayout Panel",
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            items: [
                Ext.create('Ext.container.Container', {
                    id: 'another-panel',
                    title: "VBoxLayout Panel",
                    width: 250,
                    layout: {
                        type: 'vbox',
                        align: 'left'
                    },
                    items: [{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel One',
                        flex: 2
                    },{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Two',
                        flex: 1
                    },{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Three',
                        flex: 1
                }]}),
                Ext.create('gene-search-component', {
                    id: 'searchPanel',
            })],
            renderTo: div,
        });
    }
});

Answer 1

问题是您在配置gene-search-component别名时没有为widget命名空间提供

。

alias: 'widget.gene-search-component'

另外，为了回应OP上的评论，您正在做很多不必要的键入，以您的方式创建组件。您应该使用 xtype 字段，而不是在任何地方使用 Ext.Create。我已经修改了您的代码，以向您展示它可以简单得多。

http://jsfiddle.net/hzXx8/