1

それぞれ 30 ～ 40 の要素を持つ 6 つのタブを持つタブ パネルの開発を依頼されました。各タブは個人の詳細を蓄積するフォームとして機能し、最後のタブは最初の 5 つのタブに入力されたすべての値を表示する概要ページです。ユーザーはいつでも [概要] タブに移動して、入力した詳細を確認したり、概要を表示したりできるため、概要をタブとして提供するように依頼されました。ExtJs MVC パターンに従っています。ペイロードはSpring MVCアプリケーションから/へ行きます。(JSON)

コントローラーでタブ変更イベントを使用し、newtab が概要の場合、表示非表示機能を使用してページをレンダリングしています。

方法 1 : コントローラーで Ext.getCmp('タブ内の各要素の ID') を使用し、ユーザーが入力した値に基づいて概要タブでコンポーネントを非表示にします。これにより、IE8でアプリが強制終了され、「スクリプトが遅くて何とか...」というメッセージが表示され、概要タブでページをレンダリングして表示するには、[いいえ]を5〜6回クリックする必要がありました。

方法 2 : コントローラーで ref と selectos を使用して、タブ内のすべての項目にアクセスしました。概要タブのすべてのフィールドに itemId を使用しました。のようにthis.getXyz().show()。速いと思いました。はい、それはGoogle chromeにありました。しかし、IE8 の私のアプリは goolge chrome/firefox に比べて遅いです

これに関する提案と、ページのレンダリング時間を短縮する計画。概要ページには 1000 を超えるフィールドがあります。あなたの考えをぶつけたり、これについていくつかのアイデアを投げたりしてください。

ありがとうございました！！

4

3 に答える 3

1

試してみることができるいくつかの提案があります。まず、あなたのタイトルに答えるために、javascript でコンポーネントを検索する最も簡単な方法は、ハッシュ マップを作成することだと思います。このようなもの：

var map = {};
Ext.each(targetComponents, function(item) {
    map[item.itemId] = item;
});

// Fastest way to retrieve a component
var myField = map[componentId];

レンダリング時間については、呼び出すたびに、または子コンポーネントでレイアウト/DOM が更新されないようhideにshowしてください。それを行うために使用suspendLayoutsします：

summaryTabCt.suspendLayouts();

// intensive hide-and-seek business

// just one layout calculation and subsequent DOM manipulation    
summaryTabCt.resumeLayouts(true);

最後に、最善を尽くしても処理時間を短縮できない場合は、ダメージ コントロールを行います。つまり、UI をずっとフリーズさせたり、アプリが死んでいるとブラウザがユーザーに伝えたりすることは避けてください。

setTimeoutスクリプトが一度に実行スレッドを保持する時間を制限するために使用できます。この間隔により、ブラウザは UI イベントを処理する時間を確保し、スクリプトが無限ループに陥ったと考えるのを防ぐことができます。

次に例を示します。

var itemsToProcess = [...],
    // The smaller the chunks, the more the UI will be responsive,
    // but the whole processing will take longer...
    chunkSize = 50,
    i = 0,
    slice;

function next() {
    slice = itemsToProcess.slice(i, i+chunkSize);
    i += chunkSize;
    if (slice.length) {

        Ext.each(slice, function(item) {
            // costly business with item
        });

        // defer processing to give time
        setTimeout(next, 50);
    } else {
        // post-processing
    }
}

// pre-processing (eg. disabling the form submit button)

next(); // start the loop
于 2013-12-05T22:42:57.940 に答える
0
  • deferredRenderが true であることを確認してください。これは、アクティブなタブのみをレンダリングする必要があります。
  • 別のhideModeを試すこともできます。特にhideMode:'offsets 'は有望に思えます

sencha API からの引用:

hideMode: 'offsets' は、多くの場合、特に物を非表示/表示する場合の IE のレイアウトの問題に対する解決策です。

コメントに書いたように、このパフォーマンス ガイドを参照してください: http://docs.sencha.com/extjs/4.2.2/#!/guide/performance

あなたの場合、これはあなたにとって非常に興味深いでしょう：

{
    Ext.suspendLayouts();
    // batch of updates
    // show() / hide() elements
    Ext.resumeLayouts(true);
}
于 2013-12-06T07:16:45.787 に答える