`
wangleide414
  • 浏览: 591900 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ext.form.ComboBox常用属性详解

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>combox</title>
    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="EXTJS/resources/css/ext-all.css" />
    <script type="text/javascript" src="EXTJS/bootstrap.js"></script>
    <!-- Example -->
    <script type="text/javascript">
    Ext.onReady(function() {
        //json数据
        var states = [
            {"id":"1","name":"总经理"},
            {"id":"2","name":"总监"},
            {"id":"3","name":"经理"},
            {"id":"3","name":"职员"}
        ];
        //数据字段
        Ext.regModel('State', {
            fields: [
                {type: 'string', name: 'id'},
                {type: 'string', name: 'name'}
            ]
        });
        //创建数据源
        var store = Ext.create('Ext.data.Store', {
            model: 'State',
            data: states
        });
        //单选combox(不可编辑)
        var SingleCombox = Ext.create('Ext.form.field.ComboBox', {
            fieldLabel: '权限',       //显示名
            renderTo: 'SingleCombox', //对应ID
            displayField: 'name',     //显示字段
            width: 150,               //combox宽
            multiSelect:false,        //是否多选
            labelWidth: 35,           //label长度
            store: store,             //数据源
            queryMode: 'local',       //最好设定queryMode为local，这样可以提高用户的响应速度
            editable:false            //是否可以编辑
        });
        //单选combox(可编辑)
        var SingleComboxEdit = Ext.create('Ext.form.field.ComboBox', {
            fieldLabel: '权限',
            renderTo: 'SingleComboxEdit',
            displayField: 'name',
            width: 150,
            multiSelect:false,
            labelWidth: 35,
            store: store,
            queryMode: 'local',
            editable:true
        });
        //多选combox(不可编辑)
        var MultipleCombox=Ext.create('Ext.form.field.ComboBox',{
            fieldLabel:'权限',
            renderTo:'MultipleCombox',
            displayField:'name',
            width:150,
            multiSelect:true,
            labelWidth:35,
            store: store,
            queryMode: 'local',
            editable:false
        });
        //多选combox(可编辑)
        var MultipleComboxEdit=Ext.create('Ext.form.field.ComboBox',{
            fieldLabel:'权限',
            renderTo:'MultipleComboxEdit',
            displayField:'name',
            width:150,
            multiSelect:true,
            labelWidth:35,
            store: store,
            queryMode: 'local',
            editable:true
        });
    });
    </script>
</head>
<body> 
     <span>单选combox(不可编辑)</span><br/><div id="SingleCombox"></div><hr/>
     <span>单选combox(可编辑)</span><br/><div id="SingleComboxEdit"></div><hr/>
     <span>多选combox(不可编辑)</span><br/><div id="MultipleCombox"></div><hr/>
     <span>多选combox(可编辑)</span><br/><div id="MultipleComboxEdit"></div><hr/>
</body>
</html>
 




js 代码
  1. var combo = new Ext.form.ComboBox({  
  2.     store : new Ext.data.SimpleStore({  
  3.         fields : ['value', 'text'],  
  4.         data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]  
  5.     }),  
  6.     hiddenName:'product_code',//提交到后台的input的name 
  7.     mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
  8.     valueField : 'value',   //值字段  
  9.     displayField : 'text',  //显示字段  
  10.     value:'1001',       //默认值,要设置为提交给后台的值，不要设置为显示文本  
  11.     emptyText : '请选择',  //提示信息  
  12.     mode : 'local', //数据加载模式，local代表本地数据  
  13.     triggerAction : 'all',  // 显示所有下列数据，一定要设置属性triggerAction为a  
  14.     readOnly : false,   //只读，为true时不能编辑不能点击  
  15.     editable:false,     //是否可编辑，为true时可以手写录入  
  16.     pageSize:0      //当设置大于0时会显示分页按钮
  17. }) 

如果在EditorGrid中使用Combo控件，编辑完后会发现显示的值都是编码而不是显示值，可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。
js 代码
  1. Ext.util.Format.comboRenderer = function(combo){  
  2.     return function(value){  
  3.         var record = combo.findRecord(combo.{@link #valueField}, value);  
  4.         return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};  
  5.     }  
  6. }  
  7.   
  8. // create the combo instance  
  9. var combo = new Ext.form.ComboBox({  
  10.     {@link #typeAhead}: true,  
  11.     {@link #triggerAction}: 'all',  
  12.     {@link #lazyRender}:true,  
  13.     {@link #mode}: 'local',  
  14.     {@link #store}: new Ext.data.ArrayStore({  
  15.         id: 0,  
  16.         fields: [  
  17.             'myId',  
  18.             'displayText'  
  19.         ],  
  20.         data: [[1, 'item1'], [2, 'item2']]  
  21.     }),  
  22.     {@link #valueField}: 'myId',  
  23.     {@link #displayField}: 'displayText'  
  24. });  
  25.   
  26. // snippet of column model used within grid  
  27. var cm = new Ext.grid.ColumnModel([{  
  28.        ...  
  29.     },{  
  30.        header: "Some Header",  
  31.        dataIndex: 'whatever',  
  32.        width: 130,  
  33.        editor: combo, // specify reference to combo instance  
  34.        renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer  
  35.     },  
  36.     ...  
  37. ]); 
Combo使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。
分享到：
| ExtJS Store 方法以及属性介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics