在系统中用到二级级联的combo，在修改页面中需要显示数据库中的内容，问题是如何将值显示在combo中呢，因为combo是动态加载的，我尝试用autoLoad: true让combo自动加载，form页面通过 Ext.data.JsonReader将id传入combo的hiddenName,有时combo将显示内容，有时显示的是传入的是id（这是由于combo还未加载完毕就已经赋值了）。想问下各位是如何解决的?谢谢！
解决方案 »
- DOM的问题大家来看看
- <img>标签的onerror事件不会冒泡吗？
- 请教IE7图片上传预览的问题
- 高手请教<script type="text/javascript" src="abc.jsl?Resource=com/sun/w.js"
- 页面如何直接打印从后台获取的Excel文件
- jQuery给select添加option时，FireFox中可以执行，IE里不行？
- JavaScript新手的问题
- 高分求梅花雪大侠的带checkbox功能的树的js
- 如何获得<input type="file"> 上传图片的分辨率
- 请教js问题，在线等
- js 浏览器无法显示增加行
- 用JS如何现实骰子数目的随机选取？
下面随手写了一个二级级联选小姐功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test combo</title>
<!-- extjs start -->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<!-- extjs end --> <script type="text/javascript">
Ext.onReady(function() {
var data =[
[['翠花'],['仙姑']],
[['苗苗'],['荷花']],
[['怡红'],['路丹']],
[['大波'],['阿娇']]
]; var storeCat = new Ext.data.SimpleStore({
fields: ['name','cat'],
data: [['皮鞭癖',0],['温柔型',1],['长腿型',2],['大咪咪',3]]
});
var comboCat = new Ext.form.ComboBox({
editable: false,
fieldLabel: '选择类型',
labelAlign: 'right',
store: storeCat,
mode: 'local',
displayField: 'name',
valueField: 'cat',
triggerAction: 'all'
});
comboCat.on('select',function(combo,record){
comboGirl.setValue('');
storeGirl.loadData(data[combo.getValue()]);
btnOrder.disable();
}); var storeGirl = new Ext.data.SimpleStore({
fields: ['name'],
data:[]
});
var comboGirl = new Ext.form.ComboBox({
editable: false,
fieldLabel: '选择女孩',
labelAlign: 'right',
store: storeGirl,
mode: 'local',
displayField: 'name',
triggerAction: 'all'
});
comboGirl.on('select',function(){
btnOrder.enable();
}); var btnOrder = new Ext.Button({
text: '下订单',
disabled: true,
handler: function(){
Ext.Msg.alert('恭喜','今晚您选择了我们的头牌"'+comboGirl.getValue()+'"小姐');
}
}); var fp = new Ext.form.FormPanel({
title: 'a form',
frame: true,
buttonAlign: 'center',
items:[
comboCat, comboGirl
],
buttons:[btnOrder]
});
fp.render('sel');
});
</script> </head>
<body>
<div id="sel">
</div>
</body>
</html>
columns:
[
{header:'Type',dataIndex:'type',sortable:true,renderer:typeRenderer,editor: typeEditor}
]
下面的函数实现value与display的转换
var typeRenderer = function(value)
{
var rec = comboStore.getById(value);
return rec ? rec.get('name') : '';
}
另外，在所在部门处增加事件
listeners:{scope:this,
select:function()
{
field=EditUserInfofp.form.findField("所在部门的name");
if(field.isValid())
{
//此处处理
}
}
}
{
layout : "form",
width : 205,
labelWidth : 80,
items : [{
fieldLabel : '供电所',
name : 'term_gdsId',
xtype : "combo",
width : 100,
store : new Ext.data.SimpleStore({
fields : ['gdsId', 'gdsName']
}),
displayField : 'gdsName',
valueField : 'gdsId',
hiddenName : 'term_gdsId',
typeAhead : true,
triggerAction : 'all',
editable : false,
mode : 'local',
forceSelection : true,
readOnly : isSelectGds() ? false : true,
cls : isSelectGds() ? '' : 'x-item-readOnly',
emptyText : "请选择",
listeners : {
render : function() {
if (sel.get("gdjId") != null && sel.get("gdjId") != "") {
Ext.Ajax.request({
method : 'GET',
url : ctx() + '/spring/term/gdsList?gdjId='
+ sel.get("gdjId"),
success : function(response, options) {
var addItems = [];
var obj = Ext.decode(response.responseText);
for (var i = 0; i < obj.length; i++) {
var temp = [obj[i].value, obj[i].text];
addItems.push(temp);
}
if (sel.get("gdsId") != "" && sel.get("gdsId")!=null) {
var store = updateform.find('name',
'term_gdsId')[0].store;
store.on("load", function() {
updateform.find('name',
'term_gdsId')[0]
.setValue(sel.get("gdsId"));
});
} updateform.find('name', 'term_gdsId')[0].store
.loadData([]);
updateform.find('name', 'term_gdsId')[0].store
.loadData(addItems);
},
failure : function() {
Ext.MessageBox.alert('提示', '查询供电所数据失败！');
}
});
}
}
},
onSelect : function(record) {
Ext.Ajax.request({
method : 'GET',
url : ctx()
+ '/spring/term/pwbList?gdsId='
+ record.data.gdsId,
success : function(response, options) {
var addItems = [];
var obj = Ext
.decode(response.responseText);
for (var i = 0; i < obj.length; i++) {
var temp = [obj[i].value,
obj[i].text];
addItems.push(temp);
}
updateform.find('name',
'term_deptId')[0]
.clearValue();
updateform.find('name',
'term_deptId')[0].store
.loadData([]);
updateform.find('name',
'term_deptId')[0].store
.loadData(addItems);
updateform.find('name',
'term_deptId')[0]
.clearValue();
},
failure : function() {
Ext.MessageBox.alert('提示',
'查询所属供电所失败！');
}
});
this.setValue(record.data.gdsId);
this.collapse();
}
}]
}