EXTJS4.x之combobox的使用

ComboBox控件是一个下来选框，可以实现自动完成，实现远程加载，和许多其他功能。
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

forceSelection：勾上

editable：去掉钩钩

Mycombobox1：

fileldLable：设置为“二级”
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();

保存即可。刷新重启服务器。打开浏览器可以看到如下效果

 

到这里我们已经完成了，数据部分没有详细做，这个不是这里的重要部分....