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脚本文件，可能包含具体的动态匹配逻辑...