Ext的combo在修改界面中显示问题 在系统中用到二级级联的combo,在修改页面中需要显示数据库中的内容,问题是如何将值显示在combo中呢,因为combo是动态加载的,我尝试用autoLoad: true让combo自动加载,form页面通过 Ext.data.JsonReader将id传入combo的hiddenName,有时combo将显示内容,有时显示的是传入的是id(这是由于combo还未加载完毕就已经赋值了)。想问下各位是如何解决的?谢谢! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 combo二级级联这么简单的东西 怎么被你说的这么复杂啊,下面随手写了一个二级级联选小姐功能<!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> 唉,我表达不行!你弄错意思了,你这相当于一个添加页面一样,我说的是某一模块的修改页面中,比如两级菜单省份和市级,现在进入修改页面从数据库中取出的是广东省ID和广州市ID,那第一级就应该显示为广东省,第二级显示为广州市,另一方面下拉框中的数据是动态加载的,所以如果下拉框的数据没有加载完则显示的是valueField而不是dispalyField。 我用了autoLoad: true自动加载下拉框,但并不能保证数据加载完后赋值。 定义列的时候用renderer来渲染即可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') : '';} 我并不是在可编辑表格中应用combo哦,哪里来的renderer呢,不明白! 另外,初始化的时候,将数据库中已经选择的部门和职位进行赋值另外,在所在部门处增加事件listeners:{scope:this,select:function(){field=EditUserInfofp.form.findField("所在部门的name");if(field.isValid()){//此处处理}}} 楼主,你用的是EXT什么版本的 监听职位的render事件,获取部门ID,通过Ajax请求获得职位列表,直接上代码,不懂的再问{ 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(); } }] } 解决:http://blog.csdn.net/happy492/archive/2011/05/06/6401083.aspx 怎么取DIV里的字符? 在JSON中如何通过id找到匹配的信息? 问一个对联广告的问题 javascript 参数问题! JS打印函数 网页文件下载的js代码 怎样检测用户关闭浏览器,并且弹出对话框确认是否关闭|? JavaScript版有没有人玩BLOG? 看我新做的Blog站.总共才4个文件,没用一张图片. 请问解决整数,货币,INT,DOUBLE,等类型的JavaScript验证--不是高手不要来--给分多多--请快帮忙 高分求救:在线给分,一个递归程序,很急 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();
}
}]
}