ExtJs(版本3.3.0）之ComboBox下拉框使用

最新推荐文章于 2021-02-24 00:08:41 发布

zhurifeihong

最新推荐文章于 2021-02-24 00:08:41 发布

阅读量774

点赞数

分类专栏：技术之路文章标签： javascript extjs

本文链接：https://blog.csdn.net/zhurifeihong/article/details/109669128

版权

技术之路专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ExtJs 3.3.0版本中使用ComboBox组件作为Grid表格内的一列，包括数据源的配置、ComboBox的属性设置以及在ColumnModel中的实现，展示了如何在单元格中展示和编辑下拉列表数据。

摘要由CSDN通过智能技术生成

ExtJs(版本3.3.0）之ComboBox下拉框使用

在EXT列表中行中嵌入下拉框 ；
（1）准备数据源

JsonStore = Ext.extend(Ext.data.JsonStore, {
    remoteSort: true,
        fields: ['key', 'value'],
        proxy: new Ext.data.HttpProxy({
            method: 'GET',
            url: Url
        }),
});

（2）设置combobox

new Ext.form.ComboBox({
                store: JsonStore,//数据源 
                displayField: 'key',//显示下拉列表数据值 
                valueField: 'value',//提交时下拉列表框的数据值
                 emptyText : '未绑定',//空显示未绑定
                editable:false,//不可编辑
                typeAhead: true,//
                triggerAction: 'all',//显示所有下拉数据
                allowBlank: true,//允许value为空
                forceSelection: false,//
                mode: 'local'//本地数据
            })

（3）在 Ext.grid.ColumnModel中设置下拉列（TypeDdl为本地下拉数据源）

  {
            header: "状态", dataIndex: "ISHADBIND", width: 130
            , editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
                store: JsonStore,//数据源 
                displayField: 'key',//显示下拉列表数据值 
                valueField: 'value',//提交时下拉列表框的数据值
                 emptyText : '未绑定',//空显示未绑定
                editable:false,//不可编辑
                typeAhead: true,//
                triggerAction: 'all',//显示所有下拉数据
                allowBlank: true,//允许value为空
                forceSelection: false,
                mode: 'local'//本地数据
            }))
            , renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {
                     for (var index = 0; index < TypeDdl.length; index++) {
                         if (value === TypeDdl[index]["value"]) {
                             return TypeDdl[index]["key"];
                        } else if (value === "") {
                            return TypeDdl[0]["key"];
                        }
                    }
            }
        }