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 OJ】Palindrome Partitioning

    Problem Link: http://oj.leetcode.com/problems/palindrome-partitioning/ We solve this problem using D ...

  2. Android的切图标准

    最近总是有人在问我,Android怎么切图啊,怎么适配啊,不只是Android同行,还有很多新手ui设计师. 于是我就写篇文章,根据我们平时的开发经验,简单的介绍一下吧. 如果UI设计师以1920*1 ...

  3. java作业2

    (一) 仔细阅读示例: EnumTest.java,运行它,分析运行结果? 你能得到什么结论?你掌握了枚举类型的基本用法了吗? 结论:枚举不属于原始数据类型,它的每个具体值都引用一个特定的对象.相同的 ...

  4. 推荐mysql优化的21条经验

    1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这 1. 为查询缓存优 ...

  5. 转：Web.config配置文件详解(新手必看)

    转:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.config配置文件 ...

  6. mysql explain用法和结果的含义(转)

    重点是第二种用法,需要深入的了解. 先看一个例子: mysql> explain select * from t_order; +----+-------------+---------+--- ...

  7. 简明python教程 --C++程序员的视角（八）：标准库

    os模块 这个模块包含普遍的操作系统功能. 如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.一个例子就是使用os.sep可以取代操作系统特定的路径分割符. os.system() 执行li ...

  8. js对数组的操作函数

    js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手, ...

  9. 【转】BAT 延迟变量

    延迟环境变量在bat里是重中之重,虽然前面说过,熟练应用for才算会写批处理,但如果不懂延迟环境变量的话,那么你就只能写出简单的批处理,而for语句也不能发挥最大的作用. 延迟环境变量在cmd下默认是 ...

  10. 利用range() 控制循环

    s = ['a','b','c','d','e'] for i in range(len(s)):...     if i < len(s)-1:...         print s[i] a ...