本地数据源的组合框示例 Ext.data.Store
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>本地数据源的组合示例</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//创建数据模型
Ext.regModel('PostInfo',{
fields:[{name:'province'},{name:'post'}]
});
//定义组合框中显示的数据源
var postStore=Ext.create('Ext.data.Store',{
model:'PostInfo',
data:[
{province:'北京',post:'100000'},
{province:'通县',post:'101100'},
{province:'昌平',post:'102200'},
{province:'大兴',post:'102600'},
{province:'密云',post:'101500'},
{province:'延庆',post:'102100'}
]
});
//创建表单
Ext.create('Ext.form.Panel',{
title:'combBox本地数据源',
renderTo:Ext.getBody(),
bodyPadding:5,
frame:true,
height:150,
width:370,
defaults:{
labelSeparator:':',
labelwidth:70,
width:200,
labelAlign:'left'
},
items:[{
xtype:'combo',
listConfig:{ emptyText:'未找到匹配值', maxHeight:60
}, //设置下拉列表的最大高度为60像素
name:'post',
fieldLabel:'邮政编码',
triggerAction:'all',//单击触发按钮显示全部数据
store:postStore,//设置数据源
displayField:'province',//定义要显示的字段
valueField:'post', //定义值字段
queryMode:'local', //本地模式
forceSelection:true,//要求输入值必须在列表中存在
typeAhead:true, //允许自动选择匹配的剩余部分文本
value:'102600' //默认选择大兴的邮编
}]
});
});
</script>
</head>
<body>
</body>
</html>
