extjs4 - ExtJS で約 1000 以上のコントロールを生成する

Question

私たちは、大規模なアプリケーションの Web リメイクの 1 つに ExtJS を使用することに決めました。フォーム内の完全な編集可能なグリッドのいずれかで、約 1000 以上のコントロールをレンダリングする必要がある画面/フォームを生成する必要があります。

それで、そうするための最善のアプローチは何ですか？

私は約千のコントロールを生成しようとしましたが、クライアント側で約 6 秒以上かかります。これも、ほとんどの場合、少なくともデュアルコア システムになると確信しているクライアントの構成に依存します。 .

しかし、ローカルホストでの 6 秒以上はインターネットでの 10 秒のようなものなので心配です。負荷が高いときに通常の html フォーム/コントロールを混在させる選択肢はまだありますが、ExtJS タッチ (コンボ/数値コントロールなど) が失われます。 .) したがって、何か助けがあれば、または同様の経験があれば共有してください。

上記の場合、XTemplate は高速になりますか? 私はまだ ExtJS に慣れていないので、知っている/使用している場合はベスト プラクティスを共有してください。

Answer 1

最善の方法は、このようにしないことです。何千ものコントロールを作成するには、その方法に関係なく、膨大な量のメモリが必要です。お気づきのとおり、これによりアプリケーションが非常に遅くなります。

解決策は、要素をサーバー上に保持し、何らかの形式のページングを使用して、ユーザーが実際に見ることができる要素のみを作成することです。

ページングは​​、明示的 (「次の 10 行を読み込む」) にすることも、スクロールバーが右端または下端に到達してさらに行を読み込むときにイベントを発生させることで暗黙的に行うこともできます。

通常、これをユーザーから隠すこともできます。常に行全体をロードします (ブラウザー ウィンドウが狭すぎるために表示されない同じ行の要素を非表示にしても、通常はあまり役に立ちません)。

サーバー上では、何行あるかがわかります。最初の 20 行を読み込んで表示します。行の高さを確認し (理想的には、すべて同じ高さにする必要があります)、20 行の下に空の DIV を作成して、スクロール ビューを展開します。これにより、すべての行が存在するかのように表示されます (スクロール中にジャンプしない正しいスクロールバーが表示されます)。

その空の div が表示されるとすぐに、さらに行をロードして縮小します。