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