首先新建一个ComboBox.html网页,其内容如下:
<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8; user-scalable=no”>
<title>ComboBox控件</title>
<link rel=”stylesheet”type=”text/css” href=”resources/css/ext-all.css”/>
<scripttype=”text/javascript” src=”bootstrap.js”></script>
<script type=”text/javascript” src=”ComboBox.js”></script>
</head>
<body>
<div id=”myDiv” width=”100%” height=500/>
</body>
</html>
然后新建一个ComboBox.js文件,其内容如下:
Ext.onReady(function(){
//1
定义数据模型
Ext.define(‘myDataModel’, {
extend:‘Ext.data.Model’,
fields:[{name:
‘name’,type:’string’}]
});
//2
定义数据数组并创建表格存储数据
var myData=[[“Beijing”],[“Shanghai”],[“Guangzhou”],[“Shenzhen”],[“Hongkong”]];
var myStore =
Ext.create(‘Ext.data.ArrayStore’, {
model:
‘myDataModel’, //定义的数据模型
data: myData
//数据
});
//3 创建ComboBox对象
var myComboBox =
Ext.create(‘Ext.form.field.ComboBox’,{
fieldLabel:
‘选择一个城市’,
//前面的标签
renderTo:
‘myDiv’, //
displayField:
‘name’, //显示字段
width: 320,
labelWidth: 130,
editable:false,
//不允许编辑
store: myStore,
//数据来源
listeners:{//添加监听事件
“select”:function(){
//选择事件
Ext.Msg.alert(‘您好’,’您选择了:’+this.value);
}
}
});
});
从上面的代码分析可见,其与button、grid的过程非常相近,value属性表示ComboBox的当前选择数据。浏览网页,其结果如下图所示:
前面获取的数据来源于store,除此之外还有一种简单的方式,就是直接来源于数组,如下定义一个数组:
var myArray=[‘Beijing’,’Shanghai’,’Guangzhou’,’Shenzhen’,’Hongkong’];//定义数组,显示数组的数据
则只需要设置ComboBox的store来源于这个数组即可,如下:
store: myArray,//数据来源于定义的数组myArray
其结果与之前的结果一样,只是采用前面一种方式在获取多列数据时非常有效,如有两列数据,第一列数据为城市名称,第二列数据为区号,在ComboBox中显示的是城市名称,当选择某一个城市的时候,获取该城市的区号。如将ComboBox.js文件改为如下:
Ext.onReady(function(){
//1
定义数据模型
Ext.define(‘myDataModel’, {
extend:‘Ext.data.Model’,
fields:[{name:
‘name’,type:’string’},{name:’code’,type:’string’}]
});
//2
定义数据数组并创建表格存储数据
var myData=[[‘Beijing’,’010’],[‘Shanghai’,’021’],
[‘Guangzhou’,’020’],[‘Shenzhen’,’0755’],[‘Hongkong’,’00852’]];
var myStore =
Ext.create(‘Ext.data.ArrayStore’, {
model:
‘myDataModel’, //定义的数据模型
data: myData
//数据
});
//3
创建ComboBox对象
var myComboBox =
Ext.create(‘Ext.form.field.ComboBox’,{
fieldLabel:
‘选择一个城市’,
//前面的标签
renderTo:
‘myDiv’, //
displayField:
‘name’, //显示字段
width: 320,
labelWidth: 130,
editable:false,
//不允许编辑
store: myStore,
//数据来源于store
listeners:{//添加监听事件
“select”:function(){
//选择事件
var cityName =
this.value;
var index = myStore.findBy(function(record,
id) { //寻找该值对应序号
return record.get(‘name’)
==cityName;
});
var code = myStore.getAt(index).get(‘code’);//在myStore中寻找该值
Ext.Msg.alert(‘您好’,’您选择了:’+cityName+’,区号:’
+code);
}
},
listConfig: {
//下列显示配置
getInnerTpl: function() {
return‘<div data-qtip=”{name}.{code}”>{name}({code})</div>’;
}
}
});
});
以上代码主要添加了select选择事件中的区号查询,主要根据选择的城市名称在store中查询该记录并显示出来,另外添加了下列显示的配置,即当下拉显示ComboBox时,提示格式为name (code)。结果如下图所示:
当选择一个城市之后,会出现如下图所示提示窗口:
我们在使用ComboBox时经常会出现输入一个字符下面就会自动提示,这个主要是设置其queryModel,如果是本地数据就直接设置local,同时允许编辑,即editable属性应为true(默认为true):
queryMode:
‘local’,
当输入一个字符或几个字符的时候,就会进行智能提示,如下图所示:
分享到:
相关推荐
VS2008编写的Combobox控件下拉列表中某些项不可选呈现灰色背景,可以选择的项正常背景
C#comboBox控件的使用,功能齐全,代码实现!很实用的一个小例子,下载直接能用!
资源名:VB基于ComboBox控件的自动匹配查询内容实例源码 资源类型:程序源代码 源码说明:VB基于ComboBox控件的自动匹配查询内容实例 autocomplete 自动完成 适合人群:新手及有一定经验的开发人员
vs2008只有winform用的comboBox控件,该控件可用于web应用程序项目,复制到bin文件夹,工具箱中添加即可,默认为dropdownlist,修改RenderMode为ComboBox即可(注:非本人开发,转发方便大家共享,同时作赚米用)
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
combobox 控件 combobox的实现,多个combobox之间的传递。
combobox控件 屏蔽上下键 上下键控件间切 回车键弹出和关闭并自动跳到下一控件 还可以实现背景色修改(未做)
C# WINFORM Combobox控件实现模糊查询功能,项目要用到的,自己写了个小程序实现 Combobox控件实现模糊查询功能,里面有个简单的小说明。功能比较简单。
C# ComboBox控件用法小节
mfc中自绘ComboBox控件的美化,可改变控件中边框的颜色,并改变右侧下拉按钮的图片,并可以保存编辑框的输入历史记录。本例子使用打过补丁的vs2008创建,内附控件类接口使用说明文档。
comboBox控件怎么设置成不能写入,comboBox控件怎么设置成不能写入
简单的例子,学会应用ComboBox控件,
ASP.NET 模仿ComboBox 自定义控件 ASP.NET 模仿ComboBox 自定义控件
ComboBox控件与ListBox控件的实例 采用:VB.NET
为ComboBox控件添加图片 为ComboBox控件添加图片
comboBox控件用户名保存方法
主要介绍了WinForm中comboBox控件数据绑定实现方法,结合实例形式分析了WinForm实现comboBox控件数据绑定的常用方法与相关操作技巧,需要的朋友可以参考下
MFC ComboBox控件的使用方法,可以帮助熟悉MFC ComboBox控件,有一定帮助
C# 自定义控件 自定义ComboBox。其他控件的自定义与此类似。