0

ViewPort に 4 つのタブを持つ TabPanel があります。タブ自体 (タップする「ボタン」) を保持することは可能ですが、表示されていない場合はコンテンツ/dom を削除/作成しますか?

tab.removeContent() や tab.createContent() のようなものを探していると思います...

私は試した：

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(oldValue, true);
}

何もしないようです...

これにより、すべてが削除されます。

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
}

削除部分が機能しました：

oldValue.removeInnerAt(0);

しかし、その「反対」は何ですか。つまり、タブのコンテンツを設定するにはどうすればよいですか?

var myContent = Ext.create('MyApp.view.MyView');
// and now?
4

2 に答える 2

1

Sencha シニア フォーラム マネージャーの Mitchell Simoens は、これを拡張しました。彼の github ページで見つけることができます: Optimized tab (git)

タブは削除され、キャッシュされます。

編集: 現在の状況では、拡張していますがUx.tab.OptimizedTab、これは間違っています。lib は のメソッドのいくつかにいくつかの変更を加えるだけですExt.tab.Panel(lib も拡張しませんExt.tab.Panel。Mitchell によって与えられた例では、彼が を拡張しExt.tab.Panel、 defaultType を に設定していることがわかりますoptimized-tab。

Ext.define('MyApp.view.Main', {
    extend : 'Ext.tab.Panel',
    xtype  : 'main',

    requires : [
        'Ext.TitleBar',
        'Ext.Video',
        'Ux.tab.OptimizedTab'
    ],

    config: {
        tabBarPosition : 'bottom',
        defaultType    : 'optimized-tab',
        items : {
            ...
        }
    }
}

私の意見では、lib クラス名を変更したことに注意してください。これは敬意を欠いており、何よりも、間違った名前を付けて間違ったフォルダーに配置しました。(あなたが付けた名前は ですCrossfit.view.OptimizedTabが、それはまったくビューではありません..)

あなたのアプリの優れたアーキテクチャを称賛したいと思います。Sencha Touch アーキテクチャを理解している人はあまり見たことがありません。しかし、あなた、ミッチェル、そして私はその一部です:)

于 2013-03-28T15:59:41.583 に答える
0

このコンポーネントを最初に使用する際にも問題がありました。ここで重要なのは、タブパネルに 3 つの項目がある場合、各項目に xtype 'optimized-tab' が必要であり、その中に実際の項目があることです。

例えば：

items: [
        {
            xtype: 'optimized-tab',
            title: 'Tab 1',
            iconCls: 'info',
            baseCls: 'myBtn',
            cls: 'myBtn',
            html: 'Tab 1',
            items: [
                {
                    xtype: 'component',
                    baseCls: 'myBtn',
                    cls: 'myBtn',
                    ui: 'light'
                }
            ]
        },

実際に動作していることをテストするには、これをコンソールに貼り付けて DOM 項目の量を確認します。

document.getElementsByTagName("*").length

最初のタブが空の場合は約 50 個のアイテムが表示され、マップがある場合は約 200 個のアイテムが表示されるはずです。最適化されたタブが機能していない場合、おそらく DOM に約 400 個のアイテムが表示されます。

機能している場合は、最適化されたタブが、アニメーションが完了する前に途中でアイテムを削除することがあります。したがって、後でアイテムを削除するために少し変更できます。

詳細については、次のリンクも参照してください。

:-)

于 2013-06-17T20:26:29.950 に答える