[ExtJs 2.02]Combobox的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_194/article/details/81679664

本文介绍了一个使用ExtJS框架实现的ComboBox组件示例代码。通过设置属性及数据源，实现了国家代码的选择功能。此示例展示了如何配置ComboBox的基本属性，如显示字段、值字段等，并演示了如何将数据加载到下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简单使用：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>ComboBox</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<link rel="stylesheet" type="text/css"
			href="resources/css/ext-all.css" />
		<script type="text/javascript" src="lib/ext-base.js"></script>
		<script type="text/javascript" src="lib/ext-all.js"></script>
		<script type="text/javascript"
			src="lib/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var CountryCode = [
    ['93','Afghanistan(93)'],
    ['355','Albania  (355)'],
    ['213','Algeria  (213)'],
    ['684','American Samoa  (684)'],
    ['376','Andorra  (376)'],
    ['244','Angola  (244)']
]
var cbb =new Ext.form.ComboBox({
el:'cbb',
emptyText:'请选择...',
                fieldLabel: 'Country Code',
                name:'Country Code',
                forceSelection: true,
                listWidth: 200,
                store: new Ext.data.SimpleStore({
                    fields: ['value', 'text'],
                    data : CountryCode
                    }),
                valueField:'value',
                displayField:'text',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus:true,//用户不能自己输入,只能选择列表中有的记录
                allowBlank:false
            })
cbb.render();
});
</script>
	</head>

	<body>
	<input id='cbb'/>
	</body>
</html>