ExtJS Hack: Dynamic ComboBox & Remote On-Demand Loading With Local Filtering ExtJS взломать: Dynamic ComboBox и удаленный по требованию погрузки с местными Фильтрация
In ExtJS you can create ComboBox which loads data from the server. В ExtJS вы можете создать ComboBox который загружает данные с сервера. You can also code so that new data is loaded from the server in response to an event like changing selection of another ComboBox. Вы также можете кодекса, с тем, что новые данные загружаются с сервера в ответ на событие, как меняется выбор другого 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 ComboBox автоматической фильтрации nifty, где потенциал ComboBox пунктов, автоматически отфильтровываются, чтобы показывать только ценности, которые матчей текст, который Вы ввели до сих пор. 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. Во многих случаях использование полные данные уже на стороне клиента, загруженных в ходе первоначальной загрузки 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. Интуитивный подход к решению этой проблемы заключается в том, чтобы нагрузка на ComboBox случае обработчик после настройки 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? Теперь вы хотите установить ComboBox в локальном режиме, так как вы хотите осуществлять фильтрацию местных, верно?
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. В локальном режиме ComboBox очищает фильтры магазин, которые, в свою очередь, заменяет данные в магазин с хранится, и, очевидно, устарела, снимок. 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. I want to load a ComboBox on demand. Я хочу, чтобы загрузить ComboBox по требованию. I have very large number of columns in a grid, each of which has a ComboBox to help selecting a value. Я имею очень большое количество колонок в сетке, каждый из которых имеет ComboBox, чтобы помочь выбрать значение. 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. Я загруженных данных является фиксированной и он уже находится на клиента, поэтому нет никаких оснований для bothering сервера.
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. Это может быть одна Вы могли лучше связать с.
Defect Дефект
My solution was to keep the ComboBox in local mode but load the store on first access. Мое решение было держать ComboBox в локальном режиме, но груз хранится на первом доступа. 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: Мое решение заключается в том, чтобы создать для этого метода в 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. А потом назвать это методом после загрузки 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 , Browser Обозреватель , Headline News Headline News , How To Как , 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 25 октября 2007 года в 10:56 утра
Hello,when I call Ext.data.Store.prototype.updateSnapshot after loading the ComboBox ,the hack had solve. Привет, когда я призываю Ext.data.Store.prototype.updateSnapshot после загрузки ComboBox, взломать было решить.
But I click the comboBoxA again, the comboBoxB not list the data for ever. Но я нажимаю comboBoxA опять-таки не comboBoxB перечень данных навсегда.
How u solve this problem? Как у решить эту проблему?
March 7th, 2008 at 3:36 pm 7 марта 2008 года в 3:36 вечера
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. Я хотел бы увидеть полный источник, как вы выполнить это, к сожалению, только один фрагмент, для меня не достаточно, чтобы начать работать. A complete sample would definitely help here. Полный пример будет, несомненно, поможет здесь.