ExtJS Hack: Dynamic ComboBox & Remote On-Demand Loading With Local Filtering extjs刻み目:動的なコンボボックス&リモートオンデマンド読み込んでいますお住まいの地域のフィルタリング
In ExtJS you can create ComboBox which loads data from the server.コンボボックスを作成することができますextjsは、サーバーからデータを読み込みます。 You can also code so that new data is loaded from the server in response to an event like changing selection of another ComboBox.コードすることもできます。新しいデータが読み込まれるように、サーバーからのイベントのような変化に対応して別のコンボボックスの選択します。 However it also means that the filtering is done remotely which is slow.しかしまた、フィルタリングが行われるのを意味し、リモートでの速度が遅い。
In ExtJS ComboBox automatic filtering is a nifty capability where the ComboBox items are automatically filtered to show only the values which matches the text you typed so far. extjsコンボボックスに自動フィルタリングは、気の利いた機能は、コンボボックスのアイテムが自動的にフィルタリングの値を表示するだけで、これまでにマッチするテキストを入力します。 It can also auto-fill the rest for you.それはまた、残りの自動記入します。 This powerful capability comes at a price for remote mode.この強力な能力は代償をリモートモードで起動します。 Every time the data is filtered by sending a query to the server which can be slower than local query.フィルタ処理されるたびに、データがサーバーに送信することができるクエリをローカルのクエリよりも遅いです。
In many use cases the full data is already on the client side, fetched during the initial loading of the ComboBox.多くのユースケースの完全なデータをクライアント側では既に、取得時に、最初のコンボボックスを読み込んでいます。 Subsequent filtering can be easily done on the client side.後続のフィルタリングは、クライアント側で簡単に完了します。 Let’s see how we can solve it.どれどれ解決するためにどのようにしてください。
Update: I have also filed a更新日:私はも提出する defect欠陥 in ExtJS forum to hopefully incorporate the functionality in the core with suggested solutions.うまくいけば、フォーラムをextjsの機能を内蔵しているソリューションの中核を推奨します。 The defect details has been provided at the end of this post.提供され、欠陥の詳細の最後には、次のポストを作成。
The intuitive approach to this problem is to load the ComboBox on an event handler after setting the baseParams of the store with appropriate parameters.この問題は、直感的なアプローチをコンボボックスをロードする上でのイベントハンドラに設定した後、一緒にお店にbaseparamsは、適切なパラメータです。 This works in remote mode but not in local mode.この作品をリモートモードではなくローカルモードで実行します。 Now you want to set the ComboBox to local mode because you want to implement local filtering, right?今すぐにしたいローカルモードを設定するにコンボボックスを実装するため、ローカルフィルタリングをしたい、右ですか?
The solution is far from obvious.明白な解決策にはほど遠い。 In local mode ComboBox clears the filters of the store which in turn replaces the data in the store with the stored, and obviously stale, snapshot.ローカルモードでのフィルタのコンボボックスをクリアになるのストアから置き換わりましたのデータを一緒にお店には、ストアド、と明らかに古い、スナップショットです。 To solve this you must call combo.store.updateSnapshot() after the combo.store.load() call.これを解決するために呼び出す必要がありますcombo.store.updatesnapshot ( )の後にcombo.store.load ( )の呼び出しです。
Now where can you get this function?今すぐこの関数はどこで入手するか? Oh yes…ああはい…
Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data; } ext.data.store.prototype.updatesnapshot =関数( ) ( this.snapshot = this.data ; ) The on demand loading is accomplished by keeping the data in local mode and then loading the store once (use a boolean to check) on beforequery event handler.のオンデマンドの読み込みに時間が達成さを維持するローカルモードのデータを読み込んでいます、ストアと入力し、一度(を使用するブール値をチェックする)をbeforequeryイベントハンドラです。 You have to use updateSnapshot() function after the load as explained above.を使用する必要がupdatesnapshot ( )関数をロードした後、先に説明したとおりです。
Use cases ユースケース
Let’s first look at the use cases which I am sure many will agree with.まずこれを見て私は確信多くのユースケースは同意します。1. 1 。 I want to load a ComboBox on demand.コンボボックスをロードするしたいオンデマンドです。 I have very large number of columns in a grid, each of which has a ComboBox to help selecting a value.私は非常に大規模なグリッドのカラム数を、それぞれを選択するには、コンボボックスの値を支援します。 I don’t want to load all the data upfront as that slows down the initial loading.私はしたくないのすべてのデータをロードすることが遅くなったり、最初の先行として読み込んでいます。 So I want to load the data when the ComBox drop-down is clicked.だから、データをロードするときにしたいcomboxドロップダウンをクリックします。 I can easily do that in remote mode but the downside is that the filtering functionality asks the server for filtering.私は簡単に行うにして、リモートモードが、下げは、フィルタリング機能のためのサーバーのフィルタリングを要求します。 The data I fetched is fixed and it is already on the client, so there is no justification for bothering the server.私は固定されたデータを取得すると、クライアント上のことはすでに、正当性がないため、サーバーを悩ませています。
2. 2 。 An alternative scenario is when you have a dynamically loaded ComBox.代替シナリオではcomboxときには、動的にロードします。 You would still like to do local filtering, when the data has been fully loaded, for better performance.これを行うにはまだあなたのようなローカルフィルタリング、データが完全に読み込まれたときに、より良いパフォーマンスです。 This might be the one you can better associate with.このかもしれない改善することができます。関連付けるの1つです。
Defect 欠陥
My solution was to keep the ComboBox in local mode but load the store on first access.私の解決策は、コンボボックスにローカルモードを維持するしかし、最初のアクセスをロードして保存します。 This works perfectly in remote mode for the dynamically loading case.これが完全に動作モードをリモートの場合、動的に読み込んでいます。 However it doesn’t work when the mode is local.しかしそれがうまく動かないときのモードは、ローカルです。 In local mode the doQuery() calls clearFilter() which replaces the new data in the store with old stale snapshot data.地元のモードでは、 doquery ( )の呼び出しclearfilter ( )に代わる新たなデータを一緒にお店に古い古いスナップショットのデータです。What is needed is to replace the snapshot data in this case with the current data in the store after a successful reload.何が必要に応じて、スナップショットのデータを置き換えるには、この場合、現在のに成功した後に、ストアのデータをリロードします。
The real defect is that in this case clearFilter() shouldn’t replace the store with old snapshot when the store has been refreshed by a call to load.本当の欠陥は、この場合はclearfilter ( )はない古いスナップショットを交換して一緒にお店にリフレッシュされてきたときにその店に電話をロードする。
Solution 解決策
My solution was to create a method for this in ComboBox:私の解決策は、このメソッドを作成するにはコンボボックス:
Code:コード:Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data }ext.data.store.prototype.updatesnapshot =関数( ) ( this.snapshot = this.data )And then call this method after loading the ComboBox.と入力し、このメソッドを呼び出してコンボボックスの後に読み込んでいます。
The solution works but I am not fully happy as it isn’t elegant.しかし、作品の解決策として私は完全に幸せではない上品なホテルです。 Looking forward to hear a better idea in solving this problem.を楽しみにし耳にするこの問題を解決するためにより良いアイデアです。
Additional Thoughts その他の考え
I think there should be a way for clearFilter() to recognize when new data has been loaded versus when filtered data has been loaded for the old data.と思うの道をclearfilterに存在する必要があります( )を認識する新しいデータが読み込まれたときに対フィルタ処理されたデータが読み込まれたときに、古いデータです。 Both cases uses load().どちらの場合では、負荷( ) 。
The solution could be a new configuration parameter to load() which clearFilter() looks for and processes, if available.このソリューションは、新しい構成パラメータをロードする( )がclearfilter ( )とプロセスを探し、もし入手可能です。
Filed under提出されて Ajax ajax , 、 Browserブラウザ , 、 Headline Newsニュースの見出し , 、 How Toどのように , 、 Javascript JavaScriptの , 、 Programmingプログラミング , 、 Tech Note技術のノート , 、 Webウェブ , 、 Web 2.0ウェブ2.0 | |
| |
RSS 2.0 RSS 2.0を | |
Trackbackトラックバック this Article |この記事|
Email this Article電子メールこの記事
You may also like to readを読むようにすることも可能 |





October 25th, 2007 at 10:56 am 2007年10月25日の10:56時
Hello,when I call Ext.data.Store.prototype.updateSnapshot after loading the ComboBox ,the hack had solve.こんにちは、私コールのコンボボックス読み込んでいますext.data.store.prototype.updatesnapshotした後は、そのハックが解決します。
But I click the comboBoxA again, the comboBoxB not list the data for ever.しかし、私をクリックしてcomboboxa繰り返しになりますが、特定のリストのためのデータをcomboboxbている。
How u solve this problem? uこの問題を解決する方法ですか?
March 7th, 2008 at 3:36 pm 2008年3月7日3:36 pmの
I would like to see a full source of how you are accomplishing this, unfortunately just the one snippet for me is not enough to get going.したいの完全なソースを表示するにはどのように達成には、残念ながら私だけではないの1つのスニペットを十分にならないんだ。 A complete sample would definitely help here.完全なサンプルはdefinitely助けてください。