首页 > 代码库 > ExtJs_关于combobox的那些分页二三事
ExtJs_关于combobox的那些分页二三事
近来项目需求,在新增或查询的时候有一个标签对象需要使用下拉菜单,但是数据可多可少的.少了的时候看起来还不错,紧凑一点.但是一旦躲起来看着就那么别扭了.人说百度不可靠,我发现这话真没错,想着做个分页来解决这玩意儿,没想到百度出来的结果催人泪下啊.好多不负责任的博主什么的直接复制粘贴给链接就结束了,弄得我一愣一愣的.靠天靠地不如靠自己这真是老祖宗的至理名言.为了方便以后检阅自己的成果,记录一下.
先是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是本地数据源 分页要跟后台交互所以用remote10 triggerAction:‘all‘, //这个是做匹配用的 问题不大11 pageSize:10, //分页量12 readOnly:true, //我版本3.1.1 这个属性貌似没用,但是放在这里不影响啊13 listWidth:200 //下拉列表的宽度 跟本来combobox的宽度没关系
妥妥完美分页啊~美中不足的是我忽然想到,要是有十万个待选数据...- -# 还是奉劝客户用手动输入的吧.
叶落星辰 W
ExtJs_关于combobox的那些分页二三事
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。