<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>
<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>
直接上html页面代码,做了个简单的测试例子
这里选择将第二个combobox组件在第一个值为null的时候disabled,有值的时候可以使用。需要注意的是combobox值为空时获取到的value是null,这样我们在提交的时候一定要注意处理,将为null的的值进行处理,这里我们赋值为"".
存在的问题:
事件监听choose sex 控件的change时,改变后直接展开choosePeople,数据是过滤后的,但是当我第一次点击choosePeople的下拉框时就会加载所有的peopleStore中的数据,第二次点击就不会加载所有数据。如何解决这样的问题,(代码中注释掉的用第三个store的办法除外)
分享到:
相关推荐
Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子
NULL 博文链接:https://wwwzhouhui.iteye.com/blog/701745
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
Extjs4---combobox省市区三级联动+struts2
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
extjs 自动补全,模拟下拉列表combobox
Extjs4---combobox联动实例
NULL 博文链接:https://chenxueyong.iteye.com/blog/336117
一共3个文件: ...getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access...本例子演示的4级联动菜单:州+国家+城市+地区
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs的combobox功能很强大,通过它可以模糊查询,只要添加几个属性即可,网上找的代码有的不符合我的要求。 所以自己改了一些代码。
代码看起来简洁又漂亮是如何做到的,这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
应用extjs4和struts2开发的省市区三级联动完整示例,导入myeclipse即可用,无需再导入任何jar包
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190