EXT-当地数据源的组合框示例 Ext.data.Store _Web前端

EXT--本地数据源的组合框示例 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>