Une bonne façon d’étendre Ext.panel.Panel ?

Question

Je crée une interface graphique pour une page Web à l'aide d'Ext JS 4.1.1.J'ai essayé de créer un composant ('Composant GeneSearch' ci-dessous) que je peux utiliser dans des mises en page plus compliquées.Mais pour une raison quelconque, je ne peux pas insérer une instance de 'Composant GeneSearch' dans panneau hp.Qu'est-ce qui me manque dans l'extension du ' prédéfiniPanneau Ext.' (et en créant mon propre "widget") ?

Si je supprime l'appel à "Ext.create('gene-search-component', ...", tout fonctionne;si je le remets, tout se casse.Je me demande pourquoi.

(Je n'ai pas inclus la définition de « gène-combobox ».Je suis assez convaincu que ce n'est pas la cause première de mon problème.)

Merci pour votre temps!

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

Le problème est que vous n'avez pas donné le gene-search-component le widget espace de noms lors de la configuration de son alias.

alias: 'widget.gene-search-component'

Également pour faire écho aux commentaires sur votre OP, vous effectuez beaucoup de saisie inutile en créant des composants comme vous le faites.Vous devez utiliser le champ xtype plutôt que d'utiliser Ext.Create partout.J'ai modifié votre code pour vous montrer à quel point cela pourrait être plus simple.

http://jsfiddle.net/hzXx8/