Ext 组合框 ComboBox 分页

如何用Ext来实现一个组合下拉框，来实现类似select的效果？

 

 

首先我们先来创建一个组合框comboBox：

     <script type="text/javascript">
                Ext.onReady(function(){
                         var proxy = new Ext.data.HttpProxy({url:"<%=basePath%>pageServlet"});  //定义proxy
                         
                         var City = new Ext.data.Record.create([                                          //定义逻辑结构－－－－－－－阶段1
                                     {name:"cid",type:"int",mapping:"cId"},
                                     {name:"cname",type:"string",mapping:"cName"}
                          ]);
    
                         var reader = new Ext.data.JsonReader({                                        //定义reader－－－－－－－阶段2
                                      totalProperty:"totalProperty",
                                      root:"root"
                         },City);

                        var store = new Ext.data.Store({                                                        //定义store
                                    proxy:proxy,
                                    reader:reader
                        });
    
                      var comb = new Ext.form.ComboBox({                                                  //定义组合框－－－－－－－阶段3
                                  renderTo:"com",                                                                        //定义一个div层，id = "com"
                                  store:store,
                                  emptyText:"请选择部门",                                                           
                                  mode:"remote",                                                                        //从远程获取数据

                                  displayField:"cname",                                                               //显示的数据
                                  valueField:"cid",                                                                       //实际的数据
                                  triggerAction:"all",
                                  pageSize:5
                       });
              });
     </script>

 

先来看阶段1

 注意，这里我们用到的proxy是HttpProxy，这是因为我们要从远程服务器来获取数据，这里的url地址为servlet的地址

在创建逻辑结构的时候，其中有name和mapping两个选项，

name      指的是　在记录中标志一个字段的名字。它通常用于引用指定字段，例如，在定义Ext.grid.ColumnModel的dataIndex属性时，要传过去的。

mapping 指的是   当在Ext.data.Reader中创建记录时，如何将json对象中指定属性值映射到此字段。

 

为了弄清楚逻辑结构中的mapping与谁相对应，我们先贴出servlet中的代码：

 

       public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

                         response.setContentType("text/html;charset=UTF-8");         //指定头文件
                         PrintWriter out = response.getWriter();

                         int start = Integer.parseInt(request.getParameter("start"));     //得到每页的起始页
                         int limit = Integer.parseInt(request.getParameter("limit"));        //得到每页的最大条数
                         int end = start + limit;                                                               //最大条数
                         int  totalProperty = 17;                                                              //定义的总条数

                         if(end > totalProperty){
                                 end = totalProperty;
                         }
  
                        String fmt = "{cId:%d,cName:'%s'}";                                  //定义一个格式
                        StringBuffer sb = new StringBuffer("{totalProperty:");
                        sb.append(totalProperty).append(",").append("root:[");
                        for(int i=start; i<end; i++){
                               sb.append(String.format(fmt, i,"部门" + i));
                               if(i<end-1){                                                                  //把root中元素最后一个逗号去掉
                                       sb.append(",");
                               }                        
                         }
                        sb.append("]}");
  
                        out.print(sb.toString());
                        out.flush();
                        out.close();
          }

 

 

 相信看到这里，大家一定也明白了，前台jsp页面中创建逻辑结构的Ext.data.Record.create中的mapping所对应字段会与servlet中的相应字段相同，做一种映射的关系

 那么创建了Ext.data.Record.create逻辑结构之后，再来看前台中是如何来接收从远程服务器传递过来的数据的

再来看阶段2

 从后台服务器中我们传递过来的数据格式是形式如：{totalProperty:17, root:[{ },{ },{ },{ },{ }]}

 很明显，这是一种Json格式的数据，那么，我们前台用Ext.data.JsonReader来获取对应的数据，这里还有一点不足之处，我想明眼人一看就知道，如果当数据量特别大时，

 我们在后台中一直这样拼接字符串，那么效率肯定是非常低的，所以，我们会用到一个额外的Lib包，但这不是我们本节的重点，之后我会写上，暂且我们先这样用

 

 

 最后来看阶段3

 万事倶备，只欠东风，那么，我们就来创建一个属于我们的组合框吧！！！^_^