`

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扩展控件-------可以通过下拉列表框选择每页的分页条数

    通过以上讲解,我们可以了解到,"Ext扩展控件-------可以通过下拉列表框选择每页的分页条数"是一个增强EXT Grid分页功能的实用工具,它提升了用户体验,让数据展示更加灵活,同时也对开发者提出了更高的定制化要求。...

    ext-3.4.0.rar

    6. **表单组件**:Ext JS提供了丰富的表单组件,如文本字段、日期选择器、下拉列表等,以及表单验证和提交功能,简化了Web表单的创建。 7. **拖放功能**:支持拖放操作,使得用户可以通过简单的鼠标操作在界面上...

    Ext用户扩展控件 ------超级下拉列表控件支持多选,删除,添加

    本文将深入探讨一个名为"UxSuperBoxSelect"的用户扩展控件,它是一个增强版的下拉列表,提供了多选、删除和添加功能,极大地提升了用户体验。 1. **Super下拉列表控件(UxSuperBoxSelect)** UxSuperBoxSelect是...

    ext-3.4.0 (1).zip

    8. **表单组件**:EXTJS的表单组件功能强大,支持多种输入控件,如文本框、下拉列表、日期选择器等,以及表单验证和数据提交。 9. **拖放功能**:3.4.0版本支持拖放操作,使得用户可以方便地在界面上移动和排列组件...

    ext-core-3.0.0 ext-core-3.0.0

    6. **表单组件**:提供了丰富的表单元素和验证机制,如文本输入框、选择框、下拉列表等,支持表单的提交、验证和数据处理。 7. **DOM操作**:提供了便利的DOM操作接口,如查找、添加、删除和修改DOM节点,使得对...

    Ext-Js更换皮肤

    - **创建下拉列表**:使用`ComboBox`创建一个下拉列表,其数据源是之前定义的皮肤列表。 - **处理事件**:监听下拉列表的`"select"`事件,当用户选择皮肤时,更新页面上的CSS引用,并可能保存用户的选择。 通过以上...

    ext-----多选下拉框

    在EXT框架中,"多选下拉框"是一种常见的组件,它允许用户在下拉列表中选择多个选项,而不是仅限于单选。 在EXT中实现多选下拉框,主要涉及到EXT的`ComboBox`组件和`multiSelect`配置项。`ComboBox`是一个灵活的输入...

    ext-6.2.0-gpl

    2. **Form Panel**:包含多种输入控件,如文本框、下拉列表等,方便用户输入和编辑数据。 3. **Tree Panel**:适用于展示层次结构数据,如组织架构、文件系统等。 4. **Chart**:提供丰富的图表类型,如柱状图、折线...

    Ext下拉列表树

    Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...

    ext-3.0.0.rar

    6. **表单组件**:ExtJS提供了丰富的表单组件,如文本框、下拉列表、复选框、单选按钮等,且支持表单验证和数据提交。 7. **可扩展性和主题定制**:3.0.0版本的ExtJS具有良好的可扩展性,开发者可以通过编写自定义...

    ext-2.2.zip

    6. 表单组件:ExtJS的表单组件丰富多样,包括文本输入框、复选框、单选按钮、下拉列表等,支持验证和远程提交。 7. 菜单和工具栏:ExtJS 2.2提供了易于使用的菜单和工具栏组件,可以方便地创建各种操作选项。 8. ...

    Ext-JS框架中文文档

    - **ComboBox**: 下拉列表框组件,常用于提供用户选择项。 9. **Ajax与ComboBox** - **Ext.Ajax类**: 实现了与服务器异步通信的功能。 - **Ajax文件上传**: 使用ExtJS进行文件上传操作。 10. **分页与ComboBox*...

    ext-word文档

    Widgets是ExtJS中的另一个核心概念,它们是预定义的UI组件,如按钮、文本框、列表等。使用Widgets可以快速构建复杂的用户界面。例如,创建一个简单的按钮: ```javascript var btn = new Ext.Button({ text: '...

    Ext下拉树、下拉表格

    在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...

    Ext3.1 21款精美主题和动态换皮肤

    &lt;link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" /&gt;2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    ext-4.x js文档

    6. **表单组件(Forms)**:EXTJS的表单组件强大且易于使用,支持各种输入类型,如文本框、下拉列表、日期选择器等,并且有内置的验证功能。 7. **API文档**:EXTJS的API文档是开发者的重要参考资料,详细解释了每...

    Ext下拉列表

    在ExtJS中,下拉列表(ComboBox)是一种常用的UI组件,常用于实现选择项的输入控件,它结合了文本输入框和下拉菜单的功能。在本场景中,我们将探讨如何使用ExtJS创建一个动态从数据库读取数据的下拉列表。 1. **...

    解决ext下拉列表全选和去全选功能

    标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...

    ext 动态,匹配,下拉单

    提到的`combos.html`和`combos2.html`可能包含了EXT下拉单的示例代码,展示了如何创建和使用动态匹配的下拉单。`iCombox.js`、`combos.js`和`combos2.js`则是对应的JavaScript脚本文件,可能包含具体的动态匹配逻辑...

Global site tag (gtag.js) - Google Analytics