Ext学习笔记之Combobox

<!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>Ext之Combobox实例</title>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<script type="application/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="application/javascript" src="ext-2.0/ext-all.js"></script>
<script type="application/javascript" src="ext-2.0/build/locale/ext-lang-zh_CN.js"></script>
<script type="application/javascript">
	Ext.onReady(function(){

		var cities =[
			[1,"大连市"],
			[2,"旅顺市"],
			[3,"瓦房店市"],
			[4,"普兰店市"]
		];
		/*创建MemoryProxy*/
		var proxy= new Ext.data.MemoryProxy(cities);
		console.log(proxy.data[0]);
		/*创建Record*/
		var City=Ext.data.Record.create([
			{name:"cid",type:"int",mapping:0},
			{name:"cname",type:"string",mapping:1}
		]);
		var reader = new Ext.data.ArrayReader({},City);
		console.log(reader);
		/*创建data stroe*/
		var store = new Ext.data.Store({
			proxy:proxy,
			reader:reader,
			autoLoad:true
		});

		/*定义ComboBox*/
		var combobox= new Ext.form.ComboBox({
			renderTo:Ext.getBody(),
			triggerAction:"all",
			store:store,
			displayField:"cname",
			valueField:"cid",
			mode:"local",
			emptyText:"请选择所在城市",

		});
		var btn=new Ext.Button({
			text:"列表框的值",
			renderTo:Ext.getBody(),
			handler:function(){
				Ext.Msg.alert("值","值:"+combobox.getValue()+";显示的值:"+combobox.getRawValue());
			}
		});
	});

	

</script>
</head>

<body>
</body>
</html>
附效果图:
Ext学习笔记之Combobox_第1张图片

你可能感兴趣的:(Ext学习笔记之Combobox)