extjs应用：动态组合框

extjs御用：动态组合框＆远程视频点播负载局部滤波
extjs御用：动态组合框＆远程视频点播负载局部滤波
August 20th, 2007 by Angsuman Chakraborty 2007年8月20日，由angsuman chakraborty

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.这可能是一个你可以更好地与之交往。

    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 （ ）的面貌和进程，如果有的话。

评论

1 楼 379548695 2008-10-13  

远程数据自动匹配到底怎么搞啊。？