Maneira correta de estender Ext.panel.Panel?

Question

Estou criando uma GUI para uma página da Web usando Ext JS 4.1.1.Eu tentei criar um componente ('GeneSearchComponent'abaixo) que posso usar em layouts mais complicados.Mas por alguma razão não consigo inserir uma instância de 'GeneSearchComponent' em painel hp.O que estou faltando ao estender o 'Painel externo.Painel'classe (e na criação de um "widget" próprio)?

Se eu remover a chamada para "Ext.create('gene-search-component', ...", tudo funciona;se eu colocar de volta, tudo quebra.Eu quero saber porque.

(Não incluí a definição de 'gene-combobox'.Estou bastante convencido de que essa não é a causa raiz do meu problema.)

Obrigado pelo seu tempo!

Tuomas

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

O problema é que você não deu o gene-search-component o widget namespace ao configurar seu alias.

alias: 'widget.gene-search-component'

Além disso, para ecoar os comentários em seu OP, você está digitando muitas digitações desnecessárias, criando componentes do jeito que você está.Você deve usar o campo xtype em vez de usar Ext.Create em todos os lugares.Modifiquei seu código para mostrar como ele poderia ser mais simples.

http://jsfiddle.net/hzXx8/