ExtJs_关于combobox的那些分页二三事

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

　　近来项目需求,在新增或查询的时候有一个标签对象需要使用下拉菜单,但是数据可多可少的.少了的时候看起来还不错,紧凑一点.但是一旦躲起来看着就那么别扭了.人说百度不可靠,我发现这话真没错,想着做个分页来解决这玩意儿,没想到百度出来的结果催人泪下啊.好多不负责任的博主什么的直接复制粘贴给链接就结束了,弄得我一愣一愣的.靠天靠地不如靠自己这真是老祖宗的至理名言.为了方便以后检阅自己的成果,记录一下.

　　先是JS内 var shop_store=new Ext.data.Store();

 1     shop_store=new Ext.data.Store({//新建数据源
 2         reader : new Ext.data.JsonReader({
 3                     totalProperty : "totalCount",
 4                     root : ‘result‘
 5                 }, Ext.data.Record.create([{
 6                             name : ‘id‘
 7                         }, {
 8                             name : ‘text‘
 9                         }])),
10         proxy : new Ext.data.HttpProxy({
11                 url : Ext.getDom(‘root‘).value + ‘/helper/helper!shopCombox.do‘//数据查询地址
12                         })
13     });

　　新建数据源,获取相应后台查询数据.大小由后台组装完成

　　这是Java后台查询部分,怎么查就不详述了.就记着怎么分就好了

 1 　　public void shopCombox() throws Exception {
 2         List<ShopInfo> list = dataCacheUtil.getShopList();//调用DataCacheUtil模版方法查询所有数据
 3         
 4         if (list.size()==0) {//防止空值异常
 5             printJson("{\"result\":[],\"totalCount\":0}" );
 6             return;
 7         }
 8         
 9         int start = Integer.parseInt(this.getRequest().getParameter("start")); //开始数 
10         int limit = Integer.parseInt(this.getRequest().getParameter("limit")); //间隔数
11         
12         PrintWriter out = this.getResponse().getWriter();
13         int totalcount = list.size();
14 
15         int end=start+limit;//防止尾页越界
16         if (list.size()<end) {
17             end=list.size();
18         }
19         
20         List<ShopStore> li=new ArrayList<ShopStore>();
21         ShopStore s=null;
22         
23         for (int i = start; i < end; i++) {
24             s=new ShopStore();
25             s.setId(list.get(i).getId());
26             s.setText(list.get(i).getShopname());
27             li.add(s);
28         }
29         
30         JSONArray jsonObject = JSONArray.fromObject(li);
31         JSONObject reqObject = new JSONObject();
32         reqObject.element("result", jsonObject);
33         int totalPageCount = (int) Math.ceil((double) totalcount / 10);
34         reqObject.element("totalPageCount", totalPageCount);
35         reqObject.element("countPerPage", this.getRequest().getParameter("limit"));
36         reqObject.element("totalCount", totalcount);// pages为总页数。
37         out.print(reqObject.toString());
38         
39     }

　　就像普通分页一样,其实ExtJs在这方面做的很不赖.每次调用方法就查询start 到 start+limit的数据.然后返回给前台展示在下拉框里.

 1     xtype : ‘combo‘,
 2     fieldLabel : ‘店铺名称‘,
 3     valueField : ‘id‘,
 4     displayField : ‘text‘,
 5     hiddenName : ‘shopid‘,
 6     name : ‘shopid‘,
 7     store : shop_store,
 8     //上面都是老生常谈的玩意儿    
 9     mode:‘remote‘,  //local是本地数据源  分页要跟后台交互所以用remote
10     triggerAction:‘all‘, //这个是做匹配用的 问题不大
11     pageSize:10,  //分页量
12     readOnly:true,  //我版本3.1.1 这个属性貌似没用,但是放在这里不影响啊
13     listWidth:200  //下拉列表的宽度   跟本来combobox的宽度没关系