Ext.form.ComboBox常用属性详解

wangleide414

浏览: 606652 次
性别:
来自: 西安

最近访客更多访客>>

lehmann_ding

agustins

hh_qq_love_hi

liubeihuzhenxing

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

<!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 代码

var combo = new Ext.form.ComboBox({  
    store : new Ext.data.SimpleStore({  
        fields : ['value', 'text'],  
        data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]  
    }),  
    hiddenName:'product_code',//提交到后台的input的name 
    mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
    valueField : 'value',   //值字段  
    displayField : 'text',  //显示字段  
    value:'1001',       //默认值,要设置为提交给后台的值，不要设置为显示文本  
    emptyText : '请选择',  //提示信息  

    mode : 'local', //数据加载模式，local代表本地数据  
    triggerAction : 'all',  // 显示所有下列数据，一定要设置属性triggerAction为a  
    readOnly : false,   //只读，为true时不能编辑不能点击  
    editable:false,     //是否可编辑，为true时可以手写录入  
    pageSize:0      //当设置大于0时会显示分页按钮
}) 

如果在EditorGrid中使用Combo控件，编辑完后会发现显示的值都是编码而不是显示值，可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。

js 代码

Ext.util.Format.comboRenderer = function(combo){  
    return function(value){  
        var record = combo.findRecord(combo.{@link #valueField}, value);  
        return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};  
    }  
}  
  
// create the combo instance  
var combo = new Ext.form.ComboBox({  
    {@link #typeAhead}: true,  
    {@link #triggerAction}: 'all',  
    {@link #lazyRender}:true,  
    {@link #mode}: 'local',  
    {@link #store}: new Ext.data.ArrayStore({  
        id: 0,  
        fields: [  
            'myId',  
            'displayText'  
        ],  
        data: [[1, 'item1'], [2, 'item2']]  
    }),  
    {@link #valueField}: 'myId',  
    {@link #displayField}: 'displayText'  
});  
  
// snippet of column model used within grid  
var cm = new Ext.grid.ColumnModel([{  
       ...  
    },{  
       header: "Some Header",  
       dataIndex: 'whatever',  
       width: 130,  
       editor: combo, // specify reference to combo instance  
       renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer  
    },  
    ...  
]); 

Combo使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。

分享到：

Java 反射实例 | ExtJS Store 方法以及属性介绍

2012-12-21 10:22
浏览 4025
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.form.ComboBox常用属性详解

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.form.ComboBox常用属性详解

评论

发表评论

相关推荐

ExtJS 中在不同浏览器下显示字体不一样问题

ExtJS Store 方法以及属性介绍

Ext 中 得到grid 中 store 中某行的某个单元格的值

new Ext.grid.GridPanel render

Uncaught TypeError: Cannot call method 'getTotalWidth' of undefined

ExtJs button 居中

iframe 的使用

ext groupingStroe 使用注意问题

this.ds is undefined ext gird

Ext.get(id).on('click', function(e){

pagingBar a is undefined

ext 中的各个style

ext iconCls

ext 动态修改iframe 的src

网站在IE和Firefox中的字体显示问题

a[c.xtype || d] is not a constructor ext-all.js(第9行)

b is undefined 第9行

ext 得到 j已定义id的元素

TabPanel autoLoad 乱码解决问题

动态修改TabPanel的html（1）

最近访客更多访客>>

Ext 中得到grid 中 store 中某行的某个单元格的值