0

私を助けてください。MVC を使用して TabPanel を作成しています。レンダリング パネルの時点でタブを追加します。2 つのビューとコントローラーのコードを次に示します。その結果、歪んだ画像になります。タブのタイトルは 2 回描画されます: 上部と下部 (フルスクリーンに引き伸ばされます)。コントローラー関数 addNewTab() で行「tp.add({xtype: 'mytab'}).show();」を別の「tp.add({title: 'new Tab', html: '」に変更すると、 MVC New Tab Example'}).show(); "の場合、すべてが適切にレンダリングされます。私は助けに感謝します。

Views:
Ext.define('MY.view.Tab', {
    extend: 'Ext.tab.Tab',
    alias: 'widget.mytab',
    initComponent: function() {
        this.title = 'new Tab';
        this.html = 'MVC New Tab Example';
        this.callParent(arguments);
    }
});

Ext.define('MY.view.TabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',
    initComponent: function() {
        this.id = 'MYTabPanel';
        this.callParent(arguments);
    }
});


Controller:
Ext.define('MY.controller.TabPanel', {
    extend: 'Ext.app.Controller',
    requires: ['MY.view.Tab'],
    init: function() {
        this.control({
            '#MYTabPanel': {
                render: this.addNewTab
            }
        });
    },
    addNewTab: function(tp) {
        tp.add({xtype: 'mytab'}).show();  //it work bad
        //tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();  //it work good
    }   
});
4

1 に答える 1

1

あなたのmytabクラスは拡張しExt.tab.Tabます。これは、このコードがのメイン ビューとして をtp.add({xtype: 'mytab'}); 追加していることを意味します。タブは、タブ パネルに追加するすべてのパネルまたはコンテナーに対して自動的に作成され、ビューの上部にあるボタンのようなコンポーネントだけで構成されます。TabTabPanel

つまり、上記のコードを呼び出すと、 aが作成されてビューとしてTabプッシュされ、は同じタイトルを使用して別の別のものを作成し、追加したばかりの上部にアタッチします。TabPanelTabPanelTabTab

このコードが機能するのは、( Ext で使用されるデフォルトはパネルです)tp.add({title: 'new Tab', html: 'MVC New Tab Example'})'を実際に追加していて、提供したタイトルを使用してタブを作成しているためです。panelxtypeTabPanel

修正するには:の代わりにMY.view.Tab拡張を行います。特定のビューのタブだけをカスタマイズしようとしている場合は、ソースを掘り下げて、アイテムに追加できる文書化されていないプロパティを確認してください。PanelTabExt.tab.PaneltagConfigTabPanel

于 2013-07-02T03:58:59.210 に答える