这两天算是进公司后第一次独立做开发任务，做的也相对比较用心，很多东西都没接触过，都是一点点摸索着过河，现在公司里没有了师父，只有大家都很忙的程序员同事，貌似也都一知半解的样子。很多东西都只能靠自己一行行debug来熟悉。
不扯了，说一下今天调试了很久的二级联动，以下是参考的网上例子。在一个comboBox被选择的时候，写一个时间，让对应的store进行一个过滤就可以了。 当然在我做往后台发请求，获取数据去重新加载store的时候，有的时候会出现一个 加载中的遮罩，并且前台会出现异常信息，这个问题尚在研究中。
<html>
<head>
<!-- 加载ExtJS -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script src="extjs/resources/ext-all.js"></script>
<script src="extjs/resources/ext-lang-zh_CN.js"></script>
<%@ include file="commons/head.jsp"%>
<script language="javascript">
Ext.onReady(function(){
//性别store
var sexStore = Ext.create('Ext.data.Store', {
fields: ['code', 'name'],
data : [
{"code":"0", "name":"female"},
{"code":"1", "name":"male"}
]
});
//所有人Store
var people = Ext.create('Ext.data.Store', {
fields: ['code','sexcode', 'name'],
data : [
{"code":"0", "sexcode":"0", "name":"li"},
{"code":"1","sexcode":"0", "name":"zhang"},
{"code":"2","sexcode":"1", "name":"sun"},
]
});
//combobox显示指定性别store
var peopleChoose = Ext.create('Ext.data.Store', {
fields: ['code','sexcode', 'name']
});
// 选择性别 combobox
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Sex',
store: sexStore,
id:'combo.ChooseSex',
queryMode: 'local',
displayField: 'name',
valueField: 'code',
renderTo: Ext.getBody(),
listeners:{
'change':function(thisField,newValue,oldValue,epots){
if(newValue!=null){
Ext.getCmp('combo.ChoosePeople').setDisabled(false);
people.filterBy(function(record){
return record.get('sexcode')==newValue;
});
Ext.getCmp('combo.ChoosePeople').expand();
//使用peopleStore时
// peopleChoose.removeAll();
// people.each(function(record){
// //过滤通过性别选择符合的人员数据
// if(record.get('sexcode')==newValue){
// peopleChoose.add(record);
// }
// });
}else{
Ext.getCmp('combo.ChoosePeople').setDisabled(true);
}
}
}
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose People',
//store: peopleChoose,
store:people,
disabled:true,
id:'combo.ChoosePeople',
queryMode: 'local',
displayField: 'name',
valueField: 'code',
autoSelect:false,
renderTo: Ext.getBody()
});
Ext.create('Ext.Button', {
text: 'submit',
renderTo: Ext.getBody(),
handler: function() {
var sexCode = Ext.getCmp('combo.ChooseSex').getValue();
var nameCode = Ext.getCmp('combo.ChoosePeople').getValue();
//排除为null时，赋值为""
if(!sexCode){
sexCode="";
}
if(!nameCode){
nameCode="";
}
alert("sexCode:"+sexCode+"\tnameCode:"+nameCode);
}
});
});
</script>
<!-- Put your page Title here -->
<title> Cache Server Page </title>
</head>
<body>
combobox测试
</body>
</html>
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
