적절한 방법으로 확장하 Ext.패널입니다.패널?

Question

내가 만드는 GUI 를 사용하여 웹 페이지 Ext JS4.1.1.내가 만들려고 구성 요소('GeneSearchComponent'아래)내가에 사용할 수 있는 더 복잡한 레이아웃이 있습니다.하지만 몇 가지 이유가 삽입할 수 없습니다 인스턴스'GeneSearchComponent'로 hpanel.나는 무엇을 확장하여 사전 정의된'Ext.패널입니다.패널'클래스(과를 만드는"widget"내 자신의)?

를 제거하는 경우 이 호출을"Ext.create('gene-search-component', ..."모든 일;면 내가 다시 넣어서,모든 것을 끊는다.나는 그 이유가 궁금합니다.

(나는 포함되지 않습의 정의는'유전자 combobox'.나는 확신을 그것의 근본 원인이 내 문제입니다.)

에 대한 감사는 시간!

인 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

문제는 당신이 주어지지 않았 gene-search-component 이 widget 네임스페이스 구성할 때는 그것의 별명입니다.

alias: 'widget.gene-search-component'

또한 echo 의견에 당신의 협동을 하고 있는 많은 불필요한 타이핑을 만드는 요소에서는 방법으로 당신이 있습니다.당신이 사용해야의 xtype 필드보를 사용하여 Ext.을 만들다.나는 수정의 코드를 표시하는 방법을 훨씬 더 간단한 것이 될 수 있습니다.

http://jsfiddle.net/hzXx8/