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您可以创建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的自动过滤是一个漂亮的能力,如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. 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.我有非常大的数目列在一个网格,其中每一个组合,以帮助选择一个值。 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.该数据I牵强,这是一个固定的,这是已经在客户端,所以是没有道理的困扰服务器。
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.这可能是一个您可以更好地联系。
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头条新闻 , , How To如何 , , Javascript JavaScript的 , , Programming编程 , , Tech Note技术说明 , , Web网页 , , Web 2.0 Web 2.0的 | |
| |
RSS 2.0 2.0 | |
Trackback 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负荷后ComboBox中,哈克已解决的问题。
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分
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.一个完整的样本,肯定会帮助这里。