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）方法：

Ext.form.field.ComboBox

select( Object r )：通过Model或键值查找项目

 

ExtJs学习笔记之ComboBox组件的更多相关文章

  1. ExtJs学习笔记之Button组件

    按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...

  2. ExtJs学习笔记之FormPanel组件

    FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 ...

  3. ExtJs学习笔记之Window组件

    Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: ...

  4. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  5. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  6. extjs 学习笔记（二）

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  7. Java学习笔记--Swing用户界面组件

    很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...

  8. Netty学习笔记(二)——netty组件及其用法

    1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...

  9. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

随机推荐

  1. 【LeetCode】Best Time to Buy and Sell Stock IV

    Best Time to Buy and Sell Stock IV Say you have an array for which the ith element is the price of a ...

  2. ERP存储过程的调用和树形菜单的加载（四）

    引用:DAL:System.Data.SqlClient;System.Data; namespace CommTool { public class SqlComm { /// <summar ...

  3. sqlserver中自定义函数+存储过程实现批量删除

    由于项目的需要,很多模块都要实现批量删除的功能.为了方便模块的调用,把批量删除方法写成自定义函数.直接上代码. 自定义函数: ALTER FUNCTION [dbo].[func_SplitById] ...

  4. HDU5772 (最小割）

    Problem String problem (HDU5772) 题目大意 给定一个由数字组成的字符串(n<=100),挑选出一些字符组成一个新的字符串. 字符串的价值: sigma w[id( ...

  5. ButterKnife View 注入

    /***************************************************************************************** * ButterK ...

  6. PowerShell让系统可以执行.ps1文件

    .ps1文件是PowerShell写好的脚本文件.在Windows系统中,默认情况下是不允许执行.ps1文件的,那么怎么才能让系统允许执行.ps1文件呢? 什么是“.ps1”文件? 这个是PowerS ...

  7. PostgreSQL增删数据命令示例

    在PostgreSQL中如何用简单的几条SQL语句生成大量的测试数据呢? 此处,我简单的写一个例子,供参考(在Postgresql9.1下面做的): (1)生成一万条测试数据的表foo mydb=# ...

  8. Linux TC (traffic control)

    在着手学习TC采用如下单位来描述带宽: mbps = 1024 kbps = 1024 * 1024 bps => byte/s mbit = 1024 kbit => kilo bit/ ...

  9. 【转】apache与tomcat的区别

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  10. sudo: 无法解析主机：<主机名>

    hostname配置出错 解决方法:进入目录 /etc/hosts编辑,命令 sudo gedit /etc/hosts 在其中加入下面行:127.0.0.1 主机名