ExtJs学习笔记之ComboBox组件

ComboBox组件

(1)ComboBox控件支持自动完成、远程加载、和许多其他特性。

(2)ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合; 用户可以自由的在域中键入,或从下拉选择列表中选择值。 默认用户可以输入认可值,即使它没有出现在选择列表中; 设    置forceSelection为“true”,以阻止自由格式的值,并将其限制在列表中的项。

(3)选择列表中的项是从任何Ext.data.Store(包括远程store)填充。 store中的数据项被分别映射在每个选项的显示文本和隐藏值,通过valueFielddisplayField配置。

(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
( Object r ):通过Model或键值查找项目
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。