Manera correcta de extender ext.Panel.Panel?

Question

Estoy creando una GUI para una página web utilizando EXT JS 4.1.1.He intentado crear un componente (' genesearch componente ' a continuación) que puedo usar en diseños más complicados.Pero por alguna razón no puedo insertar una instancia de ' genesearch component ' en hpanel .¿Qué falta para ampliar la clase predefinida ' ext.panel.panel ' (y en la creación de un "widget" de mi propia)?

Si quito la llamada al "Ext.create('gene-search-component', ...", todo funciona;Si lo devuelvo, todo se rompe.Me pregunto por qué.

(No he incluido la definición de 'Gene-combobox'. Estoy bastante convencido de que no es la causa raíz de mi problema).

¡Gracias por su tiempo!

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

El problema es que no ha dado el espacio de nombres gene-search-component, al configurar su alias.

alias: 'widget.gene-search-component'

También para hacer eco de los comentarios de su OP, está haciendo mucha escritura innecesaria creando componentes de la forma en que usted es.Debe hacer uso del campo XTYPE en lugar de usar ext.Create en todas partes.He modificado su código para mostrarle cuánto más sencilla podría ser.

http://jsfiddle.net/hzxx8/