ExtJs学习笔记之ComboBox组件
ComboBox组件
(1)ComboBox控件支持自动完成、远程加载、和许多其他特性。
(2)ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合； 用户可以自由的在域中键入，或从下拉选择列表中选择值。 默认用户可以输入认可值，即使它没有出现在选择列表中； 设 置forceSelection为“true”，以阻止自由格式的值，并将其限制在列表中的项。
(3)选择列表中的项是从任何Ext.data.Store（包括远程store）填充。 store中的数据项被分别映射在每个选项的显示文本和隐藏值，通过valueField和displayField配置。
(4)如果store非远程，例如：仅依靠本地数据并从前端被加载，应该确保设置queryMode为“'local'”， 因为这样会给用户提高相应。
1、示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//创建数组数据源
var combostore = new Ext.data.ArrayStore({
fields : ['id','name'],
data : [[1,'java'],[2,'android'],[3,'ios']]
});
//创建Combobox
var combobox = new Ext.form.ComboBox({
fieldLabel : '软件开发',
store : combostore,
displayField : 'name',
labelAlign : 'right',
valueField : 'id',
triggerAction : 'all',
emptyText : '请选择',
allowBlank : false,
blankText : '请选择你的兴趣爱好',
editable : false,
model : 'local'
});
combobox.on('select',function(){
alert(combobox.getRawValue());
}); var form = new Ext.form.FormPanel({
frame : true,
title : '表单标题',
style : 'margin:10px',
// draggable : true, //可拖拽
html : '<div style ="padding:10px">这里是表单内容</div>',
items : [combobox]
}); var win = new Ext.Window({
title : '窗体window',
width : 500,
height : 200,
draggable : true,
html : '<div>这里是窗体的内容</div>',
resizable : true,
modal : true,
closable : true,
maximizable : true,
minimizable : true,
items : form
});
win.show();
});
</script>
</head>
<body>
<!--
说明：
(1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。
(2)fields: ['id', 'name']：数据源包含两列，列名分别为'id','name'。
(3)data: [[1,'java'],[2,'android'],[3,'ios']]:数据源对应的数据，例：id:1,name:java。
(4)var combobox = new Ext.form.ComboBox()：创建一个新的下拉列表。
(5)store: combostore:数据源为上面创建的数据源，这个属性是combobox的必需属性。
(6)displayField: 'name',valueField: 'id'：combobox对应数据源的显示列与值列，这两个属性也是必须的。
(7)mode: 'local'：指定数据源为本地数据源，如果是本地创建的数据源，该属性也是必须的，如果数据源来自于服务器，
设置为'remote'表示数据源来自于服务器，关于服务器交互后面我们会讲解。
(8)triggerAction: 'all'：请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，
如果设为all的话，每次下拉均显示全部选项。
(9)editable: false:默认情况下，combobox的内容是可以编辑的，该属性设置为false，
使下拉列表只能选择不能编辑。
(10)combobox.on('select', function () {alert(combobox.getRawValue());}):选择时alert出下拉列表的显示值。
-->
</body>
</html>
2、效果图：
3、常用属性及方法：
（1）属性：
1.valueField:"字符型"，value值字段
2.displayField："字符型",显示文本字段
3.editable：false//false则不可编辑，默认为 true
4.triggerAction:”all”//请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意。
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250
（2）方法：
ExtJs学习笔记之ComboBox组件的更多相关文章
- ExtJs学习笔记之Button组件
按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...
- ExtJs学习笔记之FormPanel组件
FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 ...
- ExtJs学习笔记之Window组件
Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- Java学习笔记--Swing用户界面组件
很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...
- Netty学习笔记(二)——netty组件及其用法
1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
随机推荐
- linux命令：mv
1.命令介绍: mv是move的缩写,用来移动文件或重命名文件 2.命令格式: mv [选项] 源文件 目标文件 3.命令参数: -b :若需覆盖文件,则覆盖前先行备份. -f --force:fo ...
- iOS APP上线流程
前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...
- Entityframework批量删除
UI层 <a href="#" onclick="DelData(0);return false;" id="a_del" class ...
- fn
var avalon = function (el) { return new avalon.init(el) } avalon.init = function (el) { this[0] = th ...
- 从源码安装pip
由于服务器不能外网,只能通过从网上下载源码包的方式进行安装 下载地址 setuptools pip 安装步骤 首先需要安装setuptools,否则直接安装pip会提示没有setuptools $ t ...
- vmware上的Linux获取uuid
在挂载asm硬盘时需要硬盘的UUID 虚拟机配置中需要增加对UUID的支持. 在配置文件vmx文件中增加如下内容 disk.locking="FALSE" disk.EnableU ...
- Win下循环进入目录启动执行某任务
cd tldlq for /D %%s in (*) do ( cd %%s start "" LoginGate.exe start "" GameGate. ...
- 有k个list列表， 各个list列表的元素是有序的，将这k个列表元素进行排序( 基于堆排序的K路归并排序)
解题思路: 排序方法:多路归并排序 每次将n个list的头元素取出来,进行排序(堆排序),最小元素从堆中取出后,将其所在list的下一个元素 放入堆中,调整堆序列. 函数实现原型: void list ...
- tools/build.c
/* * linux/tools/build.c * * Copyright (C) 1991, 1992 Linus Torvalds */ /* * This file builds a d ...
- AtCoder Regular Contest 061
AtCoder Regular Contest 061 C.Many Formulas 题意 给长度不超过\(10\)且由\(0\)到\(9\)数字组成的串S. 可以在两数字间放\(+\)号. 求所有 ...