ext.panel.panelを拡張するための適切な方法は？

StackOverflow https://stackoverflow.com//questions/12707347

  •  13-12-2019
  •  | 
  •  

質問

EXT JS 4.1.1を使用してWebページ用のGUIを作成しています。私はより複雑なレイアウトで使用できるコンポーネント（ ' GenesearchComponent '）を作成しようとしました。しかし、何らかの理由で、 ' GenesearchComponent 'に hpanel に挿入することはできません。事前定義された ' ext.panel.panel 'クラスの拡張に何がありませんか（そして私自身の "ウィジェットの作成）？

"Ext.create('gene-search-component', ..."の呼び出しを削除すると、すべてが機能します。私がそれを取り戻したら、すべてが壊れます。なぜだろうか。

（私は '遺伝子コンボボックスの定義を含めていません。私は私の問題の根本的な原因ではないと私はかなり確信しています。）

あなたの時間をありがとう！

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,
        });
    }
});
.

役に立ちましたか？

解決

問題は、そのエイリアスを設定するときにgene-search-componentのnamespaceを与えていないことです。

alias: 'widget.gene-search-component'
.

あなたのopのコメントをエコーして、あなたがそうである途中でコンポーネントを作成する必要のない入力をたくさんしています。ext.createをいたるところで使用するのではなく、XTypeフィールドを利用する必要があります。私はあなたのコードをあなたのコードを修正しました。

href="http://jsfiddle.net/hzxx8/" rel="nofollow"> http://jsfiddle.net/hzxx8/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top