ExtJs_Combo的实时检索
项目里有个功能,需要提供一些商铺的名称.一开始的思路是按照地区分类,挺好的.但是测试数据没有那么多,所以就没有发现这个问题.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 _叶落星辰
