1.本地数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>combobox.html</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="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var city = [
[1001,"美国"],
[1002,"俄罗斯"],
[1003,"中国"],
[1004,"法国"],
[1005,"德国"],
[1006,"英国"]
];
var proxy__ = new Ext.data.MemoryProxy(city);
var record = new Ext.data.Record.create(
[
{name:"id",type:"int",mapping:0},
{name:"name",type:"string",mapping:1}
]
);
var reader__ = new Ext.data.ArrayReader({},record);
var store__ = new Ext.data.Store(
{
proxy:proxy__,
reader:reader__,
autoLoad:true
}
);
var combobox = new Ext.form.ComboBox(
{
renderTo:document.body,//显示位置
triggerAction:"all",//是否开启自动查询功能,all不开启,query开启。
store:store__,
displayField:"name",//显示的列名
valueField:"id",//实际值。
mode:"local",//local:来自本地;remote:来自远程服务器。
emptyText:"请选择国家"//没有选择时显示的值。
}
);
var btn = new Ext.Button(
{
text:"选择值",
renderTo:document.body,
handler:function(){
Ext.Msg.alert("","id:"+combobox.getValue()+",name:"+combobox.getRawValue());
}
}
);
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
2.远程数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>pagination_combobox.html</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="/extjs/ext/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="/extjs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext/adapter/ext/ext-all.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="/extjs/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// {total:10,data:[{'id':1,'name':'生产部'},{'id':2,'name':'质量部'},{'id':3,'name':'研发部'},{'id':4,'name':'销售部'},{'id':5,'name':'人事部'},{'id':6,'name':'行政部'},{'id':7,'name':'后勤部'},{'id':8,'name':'产品部'},{'id':9,'name':'市场部'},{'id':10,'name':'测试部'}]}
var proxy__ = new Ext.data.HttpProxy({url:"dept!queryDept.action"});
var record = new Ext.data.Record.create([
{
name:"id",type:"int",mapping:"id"
},
{
name:"name",type:"string",mapping:"name"
}]
);
var reader__ = new Ext.data.JsonReader({
totalProperty:"total",//总记录数(对应返回的json数据的key)
root:"data"//所有的json格式数据(对应返回的json数据的key)。
},record);
var store__ = new Ext.data.Store(
{
proxy:proxy__,
reader:reader__
});
var dept_combobox = new Ext.form.ComboBox(
{
renderTo:document.body,
emptyText:"请选择部门",
displayField:"name",
valueField:"id",
triggerAction:"all",
mode:"remote",
store:store__,
pageSize:3,//每页显示记录数
listWidth:200//列表宽度。
}
);
var button = new Ext.Button(
{
text:"查看选择的部门",
renderTo:document.body,
handler:function(){
Ext.Msg.alert("","您选泽了"+dept_combobox.getRawValue());
}
}
);
});
</script>
</head>
<body>
请选择部门:
</body>
</html>