如何用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
万事倶备,只欠东风,那么,我们就来创建一个属于我们的组合框吧!!!^_^