Modo corretto per estendere Ext.Panel.Panel?

Question

Sto creando una GUI per una pagina web usando Ext JS 4.1.1.Ho provato a creare un componente (' GenesearchComponent ' sotto) che posso utilizzare in un layout più complicato.Ma per qualche motivo non riesco a inserire un'istanza di " GenesearchComponent " in hpanel .Cosa mi manca nell'estensione della classe predefinita " ext.panel.panel " (e nella creazione di un "widget" del mio)?

Se rimuovo la chiamata a "Ext.create('gene-search-component', ...", tutto funziona;Se lo rimetti, tutto si rompe.Mi chiedo perché.

(Non ho incluso la definizione di 'Gene-ComboBox'. Sono abbastanza convinto che non sia la causa principale del mio problema.)

Grazie per il tuo tempo!

tuomi

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

Il problema è che non hai dato il gene-search-component lo spazio dei nomi widget durante la configurazione del suo alias.

alias: 'widget.gene-search-component'

.

Anche per riecheggiare i commenti sul tuo op stai facendo un sacco di digitazione non necessaria per creare componenti nel modo in cui sei.Dovresti utilizzare il campo XType piuttosto che usare ext.Create ovunque.Ho modificato il tuo codice per mostrarti quanto potrebbe essere più semplice.

http://jsfiddle.net/hzxx8/