ExtJs_Combo的实时检索

浏览数：44 / 时间：2015年06月09日

　　项目里有个功能,需要提供一些商铺的名称.一开始的思路是按照地区分类,挺好的.但是测试数据没有那么多,所以就没有发现这个问题.combo的下拉是有限制的,而且一次性所能接受的数据源大小也有限制.启动页面就卡死,报错~这可怎么办? 无奈之下加了个分页,但是多了之后忽然发现每个页20个结果,随便一列也都1K多了啊~ 这要是真心找起来多浪费功夫啊.于是就想到能不能根据输入的去模糊查询.毫无疑问,这是可行的~ 但是不知道是我搜索不得法还是怎么的,发现找的好多的模糊匹配的就是载入到local,然后去匹配...这尼玛,不是一样的效果么?依然卡死.后来看extjs的API发现combo有几个叼叼的属性啊.分分钟出结果.还是前人说的好,人最大的努力就是去做那些自己认为不会不能成功的事情,因为做完回头看会忽然发现,啊哈~不过如此嘛.

　　闲话不多说,先贴代码咯.下面这就是 xtype:‘combo‘ 的正常属性

 1 　　　　　　　    xtype : ‘combo‘,
 2                 fieldLabel : ‘店铺名称‘,
 3                 valueField : ‘id‘,
 4                 displayField : ‘text‘,
 5                 hiddenName : ‘shopid‘,
 6                 id : ‘x_shopid‘,
 7                 name : ‘shopid‘,
 8                 store : shop_store,
 9                 
10                 editable : true,//允许编辑
11                 minChars : 1,//开始查询最小字符数
12                 mode : ‘remote‘, //查询模式  local为本地数据源  remote为远程服务端
13                 typeAhead : false,//允许自动选择匹配项  经过延时typeAheadDelay后
14 //              typeAheadDelay:200,//经过指定毫秒后 自动选择匹配选项 默认250毫秒
15                 triggerAction : ‘all‘, //触发器被激活时执行的动作。使用‘all‘来运行由allQuery属性指定的查询（默认为‘query‘）  param{ Query : XXX}
16                 pageSize : 10, //分页大小
17 //              readOnly:true,  
18                 listWidth : 250, //下拉框宽度
19 
20                 displayField : ‘text‘,
21                 anchor : ‘90%‘

　　注意到 mode : ‘remote‘ 这个属性. 必须定义成remote 从服务器获取数据源如果改成local本地的话...哈哈~那就啥都看不到呗.然后是typeAhead 这个是允许自动匹配的,一般就是符合要求的条件自动匹配第一个. 延时默认250毫秒,但是可以自己通过typeAheadDelay指定哈. pageSize也加着吧,不然容易出事儿. truggerAction是一个指定触发器被激活时候执行的动作,默认查询参数是query... 等同于param{querty:xxx}...当然了,最重要的是:editable要为true~ 别问我为啥...

　　数据源就没啥好看的了.

 1     shop_store=new Ext.data.Store({
 2         // autoLoad : true,
 3         reader : new Ext.data.JsonReader({
 4                     totalProperty : "totalCount",
 5                     root : ‘result‘
 6                 }, Ext.data.Record.create([{
 7                             name : ‘id‘
 8                         }, {
 9                             name : ‘text‘
10                         }])),
11         proxy : new Ext.data.HttpProxy({
12                 url : Ext.getDom(‘root‘).value+ ‘/helper/helper!shopCombox.do?bizloc=‘+Ext.getCmp(‘c_adbizloc‘).getValue()
13                         })
14     });

　　定义一个var shop_store=new Ext.data.Store(); 然后后就完事大吉了~然后就是后面的查询分页

 1     public void shopCombox() throws Exception {
 2         
 3         
 4         if (!"".equals(this.getRequest().getParameter("query"))&&null!=this.getRequest().getParameter("query")) {
 5         List<ShopInfo> list = dataCacheUtil.getShopList(this.getRequest().getParameter("query"));
 6         
 7         if (list.size()==0) {//如果暂无商家防止空值异常
 8             ShopInfo f=new ShopInfo();
 9             f.setId("");
10             f.setShopname("查无相关结果");
11             list.add(f);
12 //            printJson("{\"result\":[],\"totalCount\":0}" );
13 //            return;
14         }
15         
16         int start = Integer.parseInt(this.getRequest().getParameter("start")); //开始数 
17         int limit = Integer.parseInt(this.getRequest().getParameter("limit")); //间隔数
18         
19         PrintWriter out = this.getResponse().getWriter();
20         int totalcount = list.size();
21 
22         int end=start+limit;//防止尾页越界
23         if (list.size()<end) {
24             end=list.size();
25         }
26         
27         List<ShopStore> li=new ArrayList<ShopStore>();
28         ShopStore s=null;
29         
30         for (int i = start; i < end; i++) {
31             s=new ShopStore();
32             s.setId(list.get(i).getId());
33             s.setText(list.get(i).getShopname());
34             li.add(s);
35         }
36         
37         JSONArray jsonObject = JSONArray.fromObject(li);
38         JSONObject reqObject = new JSONObject();
39         reqObject.element("result", jsonObject);
40         int totalPageCount = (int) Math.ceil((double) totalcount / 10);
41         reqObject.element("totalPageCount", totalPageCount);
42         reqObject.element("countPerPage", this.getRequest().getParameter(
43                 "limit"));
44         reqObject.element("totalCount", totalcount);// pages为总页数。
45         out.print(reqObject.toString());
46         
47     }else{
48         printJson("{\"result\":[],\"totalCount\":0}" );
49         return;
50     }
51         
52     }

　　之后就是sql了后面查询出的结果放到list里面,传回来 List<ShopInfo> list = dataCacheUtil.getShopList(this.getRequest().getParameter("query")); 分分钟搞定啊!启动页面再一实验,哇哈哈哈.搞定了~ 当然,还有一个问题就是如果相似结果太多的话也会有很多页,但是有分页拦着,一般也不会太差劲吧.稍后的话可以继续优化一下.

　　W　　_叶落星辰

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ExtJs_Combo的实时检索