刚接触ExtJs不到一周，项目使用ExtJs框架，有个版块用到了combobox的级联(两级)，遇到了一系列的问题，两天来一直查API、网络资料，终于解决了。
先列出遇到的一系列问题(也许你也遇到过！)，再看是如何一步步解决这些问题的，最后给出个人觉得ExtJs的ComboBox级联的最佳方案。
***首先声明，测试使用[年级]和[班级]的级联，数据从服务端获取。最终效果是：年级列表显示所有年级，默认显示第一个年级；班级列表显示第一个年级下的班级，默认显示"所有"；***
遇到的问题：
1.为何每次点击班级列表时就把所有的班级加载出来了，但切换另一个年级后就正常了？
2.打开火狐的Firebug可以看到，班级列表已经加载一次了，但点击下拉列表框后又加载了一次，怎么回事？其实点击年级列表也会再加载一次的，why？
3.如何为combobox设置一个默认值？
4.如何为combobox添加一个值(“所有”)
5.想在监听事件afterrender或者change事件中来处理上述问题，觉得不是你想的那样？
6.queryMode、triggerAction、autoLoad这些属性怎么配合使用？
----------解决-------------------------------------------------------------------------------------------------------------------------------------------------------------
先贴出测试的Servlet类：主要用于获取年级列表和班级列表，数据是静态的，以JSON格式返回。
package com.lizhou.bms.controller; import com.lizhou.bms.entity.Clazz;
import com.lizhou.bms.entity.Grade;
import net.sf.json.JSONArray; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List; /**
* 模拟获取数据
* @author bojiangzhou
* @date 2016/8/8
*/
public class StudentController extends HttpServlet { private static List<Grade> gradeList = new LinkedList<Grade>(); private static List<Clazz> clazzList = new LinkedList<Clazz>(); /**
* 数据源
*/
static {
//年级
Grade g1 = new Grade(1, "一年级");
Grade g2 = new Grade(2, "二年级");
Grade g3 = new Grade(3, "三年级"); gradeList.add(g1);
gradeList.add(g2);
gradeList.add(g3); //班级
Clazz g1c1 = new Clazz(1, 1, "一年级 1班");
Clazz g1c2 = new Clazz(2, 1, "一年级 2班");
Clazz g1c3 = new Clazz(3, 1, "一年级 3班");
Clazz g1c4 = new Clazz(4, 1, "一年级 4班");
Clazz g1c5 = new Clazz(5, 1, "一年级 5班");
Clazz g1c6 = new Clazz(6, 1, "一年级 6班");
Clazz g1c7 = new Clazz(7, 1, "一年级 7班"); Clazz g2c1 = new Clazz(8, 2, "二年级 1班");
Clazz g2c2 = new Clazz(9, 2, "二年级 2班");
Clazz g2c3 = new Clazz(10, 2, "二年级 3班");
Clazz g2c4 = new Clazz(11, 2, "二年级 4班");
Clazz g2c5 = new Clazz(12, 2, "二年级 5班");
Clazz g2c6 = new Clazz(13, 2, "二年级 6班");
Clazz g2c7 = new Clazz(14, 2, "二年级 7班"); Clazz g3c1 = new Clazz(15, 3, "三年级 1班");
Clazz g3c2 = new Clazz(16, 3, "三年级 2班");
Clazz g3c3 = new Clazz(17, 3, "三年级 3班");
Clazz g3c4 = new Clazz(18, 3, "三年级 4班");
Clazz g3c5 = new Clazz(19, 3, "三年级 5班");
Clazz g3c6 = new Clazz(20, 3, "三年级 6班");
Clazz g3c7 = new Clazz(21, 3, "三年级 7班"); clazzList.add(g1c1);
clazzList.add(g1c2);
clazzList.add(g1c3);
clazzList.add(g1c4);
clazzList.add(g1c5);
clazzList.add(g1c6);
clazzList.add(g1c7); clazzList.add(g2c1);
clazzList.add(g2c2);
clazzList.add(g2c3);
clazzList.add(g2c4);
clazzList.add(g2c5);
clazzList.add(g2c6);
clazzList.add(g2c7); clazzList.add(g3c1);
clazzList.add(g3c2);
clazzList.add(g3c3);
clazzList.add(g3c4);
clazzList.add(g3c5);
clazzList.add(g3c6);
clazzList.add(g3c7); } @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //前台传一个method参数，getGradeList即请求获取年级列表，getClazzList即请求获取班级列表
String method = request.getParameter("method"); response.setCharacterEncoding("UTF-8"); if("getGradeList".equals(method)){
JSONArray jsonArray = JSONArray.fromObject(gradeList);
String ret = jsonArray.toString();
response.getWriter().write(ret); } else if("getClazzList".equals(method)){
List<Clazz> clist = new ArrayList<Clazz>();
//年级id
String sgid = request.getParameter("gid");
if(sgid != null){
int gid = Integer.parseInt(sgid); for(Clazz c : clazzList){
if(c.getGid() == gid){
clist.add(c);
}
}
} else{
clist.addAll(clazzList);
}
JSONArray jsonArray = JSONArray.fromObject(clist);
String ret = jsonArray.toString();
response.getWriter().write(ret); }
}
}
然后是最初版的JS代码：
<%-- @author bojiangzhou
@date 2016/8/8
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Combobox</title>
<link rel="stylesheet" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script>
Ext.onReady(function () { /**
* 创建年级Combo
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'gradeId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择年级',
margin: '50 10 0 0',
labelAlign: 'right',
triggerAction: 'all', //点击下拉列表时执行的操作
queryMode: 'remote', //store的查询模式
store: Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true, //启动自动加载
proxy: { //通过ajax代理加载数据
type: 'ajax',
url: 'student?method=getGradeList',
reader: {
type: 'json',
root: 'content'
}
}
}),
listeners: {
'change': function(o, gid){ //change事件
if(gid){
var clazzId = Ext.getCmp("clazzId"); //获取Clazz Combo组件
clazzId.getStore().removeAll(); // 清空已加载列表
clazzId.reset(); // 清空已存在结果 //发生change事件后将年级id传到后台获取该年级下的班级
clazzId.getStore().load({
params: {'gid': gid}
});
}
}
} }); /**
* 创建班级Combo
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'clazzId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择班级',
margin: '50 10 0 0',
labelAlign: 'right',
triggerAction: 'all', //点击下拉列表时执行的操作
queryMode: 'remote', //store的查询模式
store: Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'id'},
{name: 'gid'},
{name: 'name'}
],
autoLoad: true, //启动自动加载
proxy: { //通过ajax代理加载数据
type: 'ajax',
url: 'student?method=getClazzList',
reader: {
type: 'json',
root: 'content'
}
}
})
}); }); </script>
</head>
<body> </body>
</html>
一、queryMode、autoLoad
第一次刷新页面显示效果如下：可以看到两个列表都没有默认值，其次是一开始就发送了两次请求，也就是说已经将年级和班级的数据加载进来了(而且还是所有数据)。
然后点击班级列表，选择一年级，看到如下效果：点击年级下拉列表的时候又发送了一次请求的，然后这个时候会触发年级combobox的change事件，加载班级列表，可以看到请求已经发送过去了，年级id也传过去了，那班级列表按理说应该是一年级的班级；
再看第二张图片的效果：点击下拉列表框的时候也同样发送了一次请求，而班级显示的是所有班级，这就是出现的问题了，为什么会这样呢？
从第一次刷新页面来说整个过程：首先刷新页面，因为配置的store为自动加载(autoLoad: true)，所以在刷新页面的时候，会自动将数据加载到store中，然后渲染到列表里。
然后点击年级列表，因为我们设置的queryMode: 'remote'，(remote是默认属性值)；个人理解：queryMode属性决定着当【第一次】点击下拉列表的时候，列表的查询模式，remote即从远程加载，相当于点击下拉列表的时候又加载了一次，这就是点击列表的时候为什么又发送了一次请求的原因。queryModel的另一个属性值是'local'，从本地加载；我的理解是，数据如果已经从远端加载到store中了(比如autoLoad，年级列表change事件触发加载班级列表)，所谓的local就是当第一次点击下拉列表的时候直接从store中获取数据，而相对的，remote则会从远端加载，而且会覆盖掉store中的数据。
再是点击班级列表，虽然点击年级列表触发了change事件来使班级列表加载当前年级下的班级，原因上面已经说了，点击班级列表的时候，同样重新发送了一个请求加载了所有的班级，所以之前的被覆盖了。
解决办法：将二者的queryMode设置为local，使其从Store中获取数据，年级列表自动加载，设置为local后点击下拉列表时不会再发送一次请求；但是班级列表是与年级列表联动的，所以在没有年级列表的时候，我不希望显示班级列表，那么可以设置班级ComboBox的store的autoLoad:false，让其不自动加载，只有在选择年级的时候才去加载相应年级下的班级。这样一来刷新页面的时候就只发送了一次加载年级的请求，班级只会在选择年级后加载，但是每次还是会发送请求的。
二、如何为让年级列表默认选择第一个，班级列表默认显示"所有"
让第一级列表(年级列表)默认显示第一条，刚开始想的办法是给班级Combobox加一个afterrender事件，即组件渲染完成后给年级列表设置第一个选项，这样也会触发change事件，就能加载班级了；
或者给年级列表添加一个属性value=1，默认选择第一个选项，但是第一次不会加载班级，没有触发change事件。这两种方式都有一个小问题，就是刷新页面的时候，会看到列表框首先显示的1，再才显示第一个选项的，尤其在加载比较慢的时候就很明显了。所以这两种方式不可取。
listeners: {
'afterrender': function (o) {
var gradeId = Ext.getCmp("gradeId"); //获取Grade Combo组件
gradeId.setValue(1);
}
}
再说说如何为班级列表插入一个选项"所有"，之前尝试过很多种方式都不行，然后想了一个不算好的办法可以在后台获取到数据后，再向集合中插入一个含有"所有"的对象，就能直接加载过来了，但是这种方式不是很好。其实主要是添加的时机不对，导致没有添加进去。
最后经过一系列的测试，对于数据的操作应放在Store的load事件中来操作，就都正常了，Store本身就是数据仓库，所以在ComboBox上做的操作都有所不妥。
看最后解决上述问题的代码：注意看注释部分，是解决问题的关键。
<%-- @author bojiangzhou
@date 2016/8/7
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Combobox</title>
<link rel="stylesheet" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script>
Ext.onReady(function () { /**
* 年级列表
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'gradeId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择年级级',
margin: '50 10 0 0',
labelAlign: 'right',
queryMode: 'local', //本地查询，配置这个属性，在第一次点击下拉列表的时候就不会从服务端加载数据了
triggerAction: 'all',
store: Ext.create('Ext.data.JsonStore', { //Store数据仓库
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true, //第一级列表设置自动加载
proxy: { //通过ajax代理加载数据
type: 'ajax',
url: 'student?method=getGradeList',
reader: {
type: 'json',
root: 'ret'
}
},
listeners: { //注意是store的监听器
'load': function (store, records) { //store的load事件
//设置第一个值为默认值
Ext.getCmp("gradeId").setValue(records[0]);
}
}
}),
listeners: { //这是ComboBox的监听器
'change': function(o, nv){ //change事件
if(nv){
var clazzId = Ext.getCmp("clazzId");
clazzId.getStore().removeAll();// 清空已加载列表
clazzId.reset();// 清空已存在结果 //在年级列表发生改变时将年级ID传到后台，加载该年级下的班级，
//但是每次改变年级时都会从服务器加载，有点消耗服务器资源
clazzId.getStore().load({
params: {'gid': nv}, //参数
callback: function(records, operation, success) { //加载完成调用的函数
//添加一个所有选项
clazzId.getStore().insert(0, {id: 0, name: '所有' });
clazzId.setValue(0); //设置默认第一个
}
});
}
}
} }); /**
* 班级列表
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'clazzId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择年级',
margin: '50 10 0 0',
labelAlign: 'right',
triggerAction: 'all',
queryMode: 'local', //本地加载模式
store: Ext.create('Ext.data.JsonStore', { //Store数据仓库
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: false, //设置第二级不自动加载
proxy: {
type: 'ajax',
url: 'student?method=getClazzList',
reader: {
type: 'json',
root: 'content'
}
}
})
});
}); </script>
</head>
<body> </body>
</html>
上面的代码还有一个问题就是每次都会从服务端加载班级列表，会消耗服务端资源，这对于大型系统来说还是应该优化下的，于是我将数据加载到本地，每次用的时候就去取，整个过程只会向服务端发送两次请求。注意看注释部分！
<%-- @author bojiangzhou
@date 2016/8/7
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Combobox</title>
<link rel="stylesheet" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script>
Ext.onReady(function () { var clazzList = {}; //班级列表 /**
* 年级列表
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'gradeId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择年级',
margin: '50 10 0 0',
labelAlign: 'right',
queryMode: 'local', //本地查询，配置这个属性，在第一次点击下拉列表的时候就不会从服务端加载数据了
triggerAction: 'all',
store: Ext.create('Ext.data.JsonStore', { //Store数据仓库
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true, //第一级列表设置自动加载
proxy: { //通过ajax代理加载数据
type: 'ajax',
url: 'student?method=getGradeList',
reader: {
type: 'json',
root: 'ret'
}
},
listeners: { //注意是store的监听器
'load': function (store, gRecords) { //store的load事件 //在Store的load事件中，加载班级的数据，返回成功后进行一些处理
Ext.getCmp("clazzId").getStore().load({
callback: function(records, operation, success) { //加载成功返回后调用的函数
//将年级全部加载出来放到全局中
for(var i = 0;i < records.length;i++){
var gid = records[i].data['gid']; //获取班级所属的年级id
if(!clazzList[gid]){
clazzList[gid] = []; //数组用于存放班级
clazzList[gid].push({id:0, name: '所有'}); //添加一个所有选项
} clazzList[gid].push(records[i]); //将record添加到该年级的数组下
} //要先加载后在设置默认值，由于异步加载，change事件可能会不起作用。
//设置年级的第一个值为默认值
Ext.getCmp("gradeId").setValue(gRecords[0]); //注意是外部的gRecords
}
});
}
}
}),
listeners: { //这是ComboBox的监听器
'change': function(o, nv){ //change事件
if(nv){
var clazzId = Ext.getCmp("clazzId");
clazzId.getStore().removeAll();// 清空已加载列表
clazzId.reset();// 清空已存在结果 if(clazzList[nv]){
//发生change事件后，从班级列表中取出该年级下的班级添加到班级store中
clazzId.getStore().insert(0,clazzList[nv]);
clazzId.setValue(0); //设置第一个值默认,即"所有"
}
}
}
} }); /**
* 班级列表
*/
Ext.create('Ext.form.ComboBox', {
renderTo: Ext.getBody(),
id: 'clazzId',
displayField: 'name',
valueField: 'id',
editable: false,
readonly: true,
allowBlank: true,
fieldLabel: '选择年级',
margin: '50 10 0 0',
labelAlign: 'right',
triggerAction: 'all',
queryMode: 'local', //本地加载模式
store: Ext.create('Ext.data.JsonStore', { //Store数据仓库
fields: [
{name: 'id'},
{name: 'gid'},
{name: 'name'}
],
autoLoad: false, //设置第二级不自动加载
proxy: {
type: 'ajax',
url: 'student?method=getClazzList',
reader: {
type: 'json',
root: 'content'
}
}
})
}); }); </script>
</head>
<body> </body>
</html>
三、再说说triggerAction
下面是文档对triggerAction的说明，刚开始不怎么明白这个属性的用途，只知道设置为all的时候能查询出数据来，设置成query的时候就查不出来了....
后来看到一本书上的例子才对它的用法理解了，triggerAction一般来说会和allQuery、queryParam两个属性配合使用，而且一般combobox是可编辑的，这几个参数是用于输入查询的。
在triggerAction:'all'的时候，点击下拉列表的时候会根据allQuery的值查询所有相关的数据，queryParam和allQuery可以理解成键和值关系。
比如配置：queryParam:'grade', allQuery:'一年级', triggerAction:'all'，点击下拉列表时，注意是点击下拉列表的时候，就会向后台请求，并带上参数:grade='一年级'，然后后台就可以根据这组参数查询该年级下的班级返回来。
如果你在combo中输入值，且配置了minChars，比如：minChars:3，则在你输入的字符数大于3的时候就会自动向后台发送请求，并带上参数：grade='你输入的值'，然后查询。
设置triggerAction:'query'的时候，在点击下拉列表的时候，发送的参数就是grade='你输入的值'，如果没有输入，相当于发送grade=''。
