ComboBox控件是一个下来选框,可以实现自动完成,实现远程加载,和许多其他功能。
ComboBox是像传统的HTML中<INPUT>和<select>的结合,用户可以自由输入到字段中,或挑选一个下拉选择列表的值。默认情况下,用户可以输入任何值,即使它不会出现在选择列表中,为防止自由形式的值,一般对其进行限制列表中的项目,editable:去掉钩钩和forceSelection设置为true。
选择列表中的选项进行填充任何Ext.data.Store,包括远程存储。在远程的数据项映射到每个选项的显示的文本,并支持通过valueField和displayField配置的。
如果你的远程是没有提供数据源,也就是说,它仅仅依赖于本地数据,你应该设置queryMode到“本地”,因为这将提高用户的响应能力。
ComboBox是像传统的HTML中<INPUT>和<select>的结合,用户可以自由输入到字段中,或挑选一个下拉选择列表的值。默认情况下,用户可以输入任何值,即使它不会出现在选择列表中,为防止自由形式的值,一般对其进行限制列表中的项目,editable:去掉钩钩和forceSelection设置为true。
选择列表中的选项进行填充任何Ext.data.Store,包括远程存储。在远程的数据项映射到每个选项的显示的文本,并支持通过valueField和displayField配置的。
如果你的远程是没有提供数据源,也就是说,它仅仅依赖于本地数据,你应该设置queryMode到“本地”,因为这将提高用户的响应能力。
下面我们来实现一个二级级联的combobox的例子。
同样我们使用jsp作为简单的后台测试,Sencha Architect和myeclipse来制作这个简单的例子。
用Sencha Architect新建combobox工程,保存在javaweb的webRoot目录下。用myeclipse在combobox目录下面新建一个address.jsp的文件,内容如下:
<%@page import="java.util.*"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*"%>
<%
int cmd = Integer.parseInt(request.getParameter("cmd"));
JSONArray jsonArray;
JSONObject jsonObj;
switch(cmd){
//获取省
case 0:
jsonArray = new JSONArray();
jsonObj = new JSONObject();
jsonObj.put("name", "安徽");
jsonObj.put("id", 1);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "江苏");
jsonObj.put("id", 2);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "上海");
jsonObj.put("id", 3);
jsonArray.add(jsonObj);
out.println(jsonArray.toJSONString());
break;
//获取安徽省下面的市
case 1:
jsonArray = new JSONArray();
jsonObj = new JSONObject();
jsonObj.put("name", "合肥");
jsonObj.put("id", 1);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "芜湖");
jsonObj.put("id", 2);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "淮南");
jsonObj.put("id", 3);
jsonArray.add(jsonObj);
out.println(jsonArray.toJSONString());
break;
//获取江苏省下面的市
case 2:
jsonArray = new JSONArray();
jsonObj = new JSONObject();
jsonObj.put("name", "南京");
jsonObj.put("id", 1);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "苏州");
jsonObj.put("id", 2);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "镇江");
jsonObj.put("id", 3);
jsonArray.add(jsonObj);
out.println(jsonArray.toJSONString());
break;
//获取上海下面的区
case 3:
jsonArray = new JSONArray();
jsonObj = new JSONObject();
jsonObj.put("name", "普陀");
jsonObj.put("id", 1);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "宝山");
jsonObj.put("id", 2);
jsonArray.add(jsonObj);
jsonObj = new JSONObject();
jsonObj.put("name", "黄埔");
jsonObj.put("id", 3);
jsonArray.add(jsonObj);
out.println(jsonArray.toJSONString());
break;
}
%>
上述代码的功能是根据客户端传来的cmd参数分别输出不同的地址列表,这里不做详细的解析。
用Sencha Architect在主窗体中拖如一个Panel和两个combobox,分别设置一下以下的属性:
mypanel:
layout:设置为vbox
title:设置为二级联动combobox
padding:设置为20px
Mycombobox:
fileldLable:设置为“一级”
id:设置为combobox1
id:设置为combobox1
forceSelection:勾上
editable:去掉钩钩
Mycombobox1:
fileldLable:设置为“二级”
id:设置为combobox2
id:设置为combobox2
forceSelection:勾上
editable:去掉钩钩
完成之后可以得到下面的效果:
接下来我们配置combobox1的store
先配置一个Model,拖动一个model到工程视图中的Models中,设置userClassName为Address,在Fields中添加两个字段,分别为id和name,如下图
再配置一个Store,拖动一个Store到工程视图中的Stores中并设置userClassName为AddressStore1,并把autoLoad和autoSync勾上,model设置为Address,再拖一个Ajax Proxy到AddressStore1上,设置其url为“address.jsp?cmd=0”,在reader中添加一个jsonReader。完成后如下图
数据源暂时配置完了,下面我们设置combobox1的store为AddressStore1,并把displayField选择为name和valueField选择为id,保存启动服务器,打开浏览器看看吧
第一个combobox已经出来了,效果不错,我们照上面的方法配置第二个combobox。配置多一个AddressStore2即可,不详细说了。配置好后如下图
至此我们的两个combobox已经配置好了,现在开始实现联动,即当第一个选择好了之后第二个的数据也跟着改变。
1.找到combobox1的Event Bindings属性,点击“+”号进行添加,添加一个“select”的事件响应。
2.点击刚才添加的select,进入代码编辑界面输入如下内容
//获取combobox控件
var combobox = Ext.getCmp("combobox2");
//获取store
var store = combobox.getStore();
//获取proxy
proxy = store.getProxy();
//重新设置url
proxy.url = "address.jsp?cmd="+combo.getValue();
//重新加载数据
store.reload();
保存即可。刷新重启服务器。打开浏览器可以看到如下效果
到这里我们已经完成了,数据部分没有详细做,这个不是这里的重要部分....