我的第一个Extjs combo联动下…

联动下拉框

1. 后台代码

 

public void getXBValue() {

System.out.println("我擦。333。");

try {

PrintWriter out = getResponse().getWriter();

//json格式： id， name

out.write("[[1, '计算机科学系'], [2, '外语系'], [3, '经济系'], " +

"[4, '电子信息工程系'], [5, '工商管理系'], [6, '数理系'], " +

"[7, '法律与公共管理系'], [8, '艺术系'], [9, '教师教育系'], [10, '中文系']]");

out.close();

} catch (IOException e) {

}

 

return;

}

 

 

public void getZYSelectValueByXBid() {

String XBid = getRequest().getParameter("XBid");

System.out.println("XBid" + XBid);

try {

PrintWriter out = getResponse().getWriter();

out.flush();

//json格式： id， name

if (null != XBid && "1".equals(XBid)) {

out.write("[[1,'网络方向'],[2,'软件工程'],[3,'信息安全'],[4,'嵌入式']]");

}

if (null != XBid && "2".equals(XBid)) {

out.write("[[1,'222'],[2,'2323'],[3,'2424'],[4,'2525']]");

}

if (null != XBid && "3".equals(XBid)) {

out.write("[[1,'33'],[2,'33件工程'],[3,'33信息安全'],[4,'嵌入式']]");

}

out.close();

} catch (IOException e) {

}

 

return;

}

 

 

2. 前端代码

Ext.onReady(function() {

 

 

 

 

var storeXB = new Ext.data.Store({

    proxy:new Ext.data.HttpProxy({

     url :  __ctxPath + '/stuBaseInfo/StuBaseInfo/getXBValue.do' 

//         url :  __ctxPath + '/testProject/SelectBox/getSelectValue3.do' 

    }),

    reader : new Ext.data.ArrayReader( { }, 

    Ext.data.Record.create([ {

name : 'XBId'

}, {

name : 'XBName'

}]))

//, autoLoad: true  //自动加载数据

});

 

var comboXB = new Ext.form.ComboBox({

store: storeXB , //数据集

listeners : {

 

select : function(combo, record, index) {

//在此处设置联动(关联)

//var oneComboValue = Ext.get("comboProvincesId").dom.value;

//1. 把第一个下拉框的值传到后台，

var oneComboValue =record.data.XBId;

comboZY.reset();

storezhuanye.removeAll();

storezhuanye.proxy= new Ext.data.HttpProxy({

//2. 后台根据获取的的第一个下拉框的值取得其对应的数据

    url: __ctxPath + '/stuBaseInfo/StuBaseInfo/getZYSelectValueByXBid.do?XBid=' + oneComboValue

});   

//3. 把从后台得到的数据设置到第二个下拉框

            storezhuanye.load(); 

 

}

},

valueField : "XBId",

displayField : "XBName",

mode : 'remote',  //记得如果是加载后台的数据一定要设置remote

forceSelection : true,

allowBlank: false,  //false则不能为空，默认为true  

blankText : '专业不能为空',

emptyText : '请选择系别',

id: 'stuXi6',

name: 'stuXi6',

hiddenName : 'XBId',

editable : false,  //不可输入

triggerAction : 'all',

fieldLabel : '系别',

width : 120

});

 

var storezhuanye =  new Ext.data.Store({

    proxy:new Ext.data.HttpProxy({

     //url :  __ctxPath + '/stuBaseInfo/StuBaseInfo/getXBSelectValue.do' 

    }),

    reader : new Ext.data.ArrayReader( { }, 

    Ext.data.Record.create([ {

name : 'ZYId'

}, {

name : 'ZYName'

}]))

//, autoLoad: true  //自动加载数据

});

 

var comboZY = new Ext.form.ComboBox({

store: storezhuanye,  //数据集

valueField : "ZYId",

displayField : "ZYName",  

mode : 'remote',

forceSelection : true,

emptyText : '选择专业',

hiddenName : 'ZYId',

editable : false,

triggerAction : 'all', 

allowBlank: false,  //false则不能为空，默认为true  

blankText : '专业不能为空',

fieldLabel : '专业',

name : 'stuZy4',

id: 'stuZy4',

width : 120,

//添加监听事件

listeners: {

//给select事件添加监听

 

select: function (combo, record, index) {  //field是本下拉框

//处理下拉框的值

}

}

});

});

最后的效果图：

 

版权声明：本文为博主原创文章，未经博主允许不得转载。