الطريقة الصحيحة لتوسيع Ext.panel.Panel؟

Question

أقوم بإنشاء واجهة مستخدم رسومية لصفحة ويب باستخدام Ext JS 4.1.1.لقد حاولت إنشاء مكون ("مكون البحث الجيني' أدناه) والتي يمكنني استخدامها في تخطيطات أكثر تعقيدًا.ولكن لسبب ما لا أستطيع إدراج مثيل لـ "مكون البحث الجيني' داخل com.hpanel.ما الذي أفتقده في توسيع النطاق المحدد مسبقًا؟Ext.panel.Panel'(وفي إنشاء "القطعة" الخاصة بي)؟

إذا قمت بإزالة المكالمة إلى "Ext.create('gene-search-component', ..."، كل شيء يعمل؛إذا قمت بإعادته مرة أخرى، ينكسر كل شيء.وأتساءل لماذا.

(لم أقم بتضمين تعريف "صندوق التحرير والسرد الجيني".أنا مقتنع تمامًا أن هذا ليس السبب الجذري لمشكلتي.)

شكرا على وقتك!

توماس

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

المشكلة هي أنك لم تعط gene-search-component ال widget مساحة الاسم عند تكوين الاسم المستعار الخاص به.

alias: 'widget.gene-search-component'

أيضًا لتكرار التعليقات على OP الخاص بك، فإنك تقوم بالكثير من الكتابة غير الضرورية لإنشاء المكونات بالطريقة التي أنت عليها.يجب عليك الاستفادة من حقل xtype بدلاً من استخدام Ext.Create في كل مكان.لقد قمت بتعديل الكود الخاص بك لأوضح لك مدى بساطة الأمر.

http://jsfiddle.net/hzXx8/