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 Grid分页功能的实用工具,它提升了用户体验,让数据展示更加灵活,同时也对开发者提出了更高的定制化要求。...
6. **表单组件**:Ext JS提供了丰富的表单组件,如文本字段、日期选择器、下拉列表等,以及表单验证和提交功能,简化了Web表单的创建。 7. **拖放功能**:支持拖放操作,使得用户可以通过简单的鼠标操作在界面上...
本文将深入探讨一个名为"UxSuperBoxSelect"的用户扩展控件,它是一个增强版的下拉列表,提供了多选、删除和添加功能,极大地提升了用户体验。 1. **Super下拉列表控件(UxSuperBoxSelect)** UxSuperBoxSelect是...
8. **表单组件**:EXTJS的表单组件功能强大,支持多种输入控件,如文本框、下拉列表、日期选择器等,以及表单验证和数据提交。 9. **拖放功能**:3.4.0版本支持拖放操作,使得用户可以方便地在界面上移动和排列组件...
6. **表单组件**:提供了丰富的表单元素和验证机制,如文本输入框、选择框、下拉列表等,支持表单的提交、验证和数据处理。 7. **DOM操作**:提供了便利的DOM操作接口,如查找、添加、删除和修改DOM节点,使得对...
- **创建下拉列表**:使用`ComboBox`创建一个下拉列表,其数据源是之前定义的皮肤列表。 - **处理事件**:监听下拉列表的`"select"`事件,当用户选择皮肤时,更新页面上的CSS引用,并可能保存用户的选择。 通过以上...
在EXT框架中,"多选下拉框"是一种常见的组件,它允许用户在下拉列表中选择多个选项,而不是仅限于单选。 在EXT中实现多选下拉框,主要涉及到EXT的`ComboBox`组件和`multiSelect`配置项。`ComboBox`是一个灵活的输入...
2. **Form Panel**:包含多种输入控件,如文本框、下拉列表等,方便用户输入和编辑数据。 3. **Tree Panel**:适用于展示层次结构数据,如组织架构、文件系统等。 4. **Chart**:提供丰富的图表类型,如柱状图、折线...
Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...
6. **表单组件**:ExtJS提供了丰富的表单组件,如文本框、下拉列表、复选框、单选按钮等,且支持表单验证和数据提交。 7. **可扩展性和主题定制**:3.0.0版本的ExtJS具有良好的可扩展性,开发者可以通过编写自定义...
6. 表单组件:ExtJS的表单组件丰富多样,包括文本输入框、复选框、单选按钮、下拉列表等,支持验证和远程提交。 7. 菜单和工具栏:ExtJS 2.2提供了易于使用的菜单和工具栏组件,可以方便地创建各种操作选项。 8. ...
- **ComboBox**: 下拉列表框组件,常用于提供用户选择项。 9. **Ajax与ComboBox** - **Ext.Ajax类**: 实现了与服务器异步通信的功能。 - **Ajax文件上传**: 使用ExtJS进行文件上传操作。 10. **分页与ComboBox*...
Widgets是ExtJS中的另一个核心概念,它们是预定义的UI组件,如按钮、文本框、列表等。使用Widgets可以快速构建复杂的用户界面。例如,创建一个简单的按钮: ```javascript var btn = new Ext.Button({ text: '...
在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...
<link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
6. **表单组件(Forms)**:EXTJS的表单组件强大且易于使用,支持各种输入类型,如文本框、下拉列表、日期选择器等,并且有内置的验证功能。 7. **API文档**:EXTJS的API文档是开发者的重要参考资料,详细解释了每...
在ExtJS中,下拉列表(ComboBox)是一种常用的UI组件,常用于实现选择项的输入控件,它结合了文本输入框和下拉菜单的功能。在本场景中,我们将探讨如何使用ExtJS创建一个动态从数据库读取数据的下拉列表。 1. **...
标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...
提到的`combos.html`和`combos2.html`可能包含了EXT下拉单的示例代码,展示了如何创建和使用动态匹配的下拉单。`iCombox.js`、`combos.js`和`combos2.js`则是对应的JavaScript脚本文件,可能包含具体的动态匹配逻辑...