Richtiger Weg, um Ext zu erweitern.Panel.Gremium?

Question

Ich erstelle eine GUI für eine Webseite mit Ext JS 4.1.1.Ich habe versucht, eine Komponente zu erstellen ('Genesearchkomponente'unten), die ich in komplizierteren Layouts verwenden kann.Aber aus irgendeinem Grund kann ich keine Instanz von 'einfügenGenesearchkomponente' in hpanel.Was vermisse ich bei der Erweiterung des vordefinierten 'Aussen.Panel.Panel" klasse (und beim Erstellen eines eigenen "Widgets")?

Wenn ich den Anruf entferne zu "Ext.create('gene-search-component', ...", alles funktioniert;wenn ich es wieder reinstecke, geht alles kaputt.Ich frage mich, warum.

(Ich habe die Definition von 'Gen-Combobox' nicht aufgenommen.Ich bin ziemlich überzeugt, dass dies nicht die Hauptursache für mein Problem ist.)

Danke für deine Zeit!

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

Das Problem ist, dass Sie das nicht gegeben haben gene-search-component der widget namespace bei der Konfiguration seines Alias.

alias: 'widget.gene-search-component'

Um auch die Kommentare zu Ihrem OP wiederzugeben, machen Sie viele unnötige Tippvorgänge, um Komponenten so zu erstellen, wie Sie es sind.Sie sollten das Feld xtype verwenden, anstatt Ext zu verwenden.Erschaffe überall.Ich habe Ihren Code geändert, um Ihnen zu zeigen, wie viel einfacher es sein könnte.

http://jsfiddle.net/hzXx8/