`

ext--下拉列表

    博客分类：
  • Ext
ext 
阅读更多

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>




分享到：
| ext--panel
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics