• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    Extjs EditorGridPanel中ComboBox列的显示问题

    发布者: 晋3555 | 发布时间: 2025-8-13 13:05| 查看数: 19| 评论数: 0|帖子模式

    为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:

    //部门列表
    var comboxDepartmentStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: "GetDepartmentJson.aspx",
    method: 'GET'
    }),
    reader: new Ext.data.JsonReader({
    root: 'data',
    totalProperty: 'totalCount',
    fields: [
    { name: 'departmentid', mapping: 'ID' },
    { name: 'departmentname', mapping: 'Name' }
    ]

    })
    });
    //根据Combobox列表中对应的Id的值来渲染
    function rendererMeterTypeCombobox(value, p, r) {
    var index = comboxDepartmentStore.find(Ext.getCmp('cbdepartment').valueField, value);
    var record = comboxDepartmentStore.getAt(index);
    var displayText = "";
    if (record == null) {
    return value;
    } else {
    return record.data.astype; // 获取record中的数据集中的display字段的值
    }
    }


    var sm = new Ext.grid.CheckboxSelectionModel();

    var cm = new Ext.grid.ColumnModel({
    columns: [sm, new Ext.grid.RowNumberer(), {
    header: 'id',
    dataIndex: 'id',
    hidden: true
    }, {
    header: '姓名',
    width: 40,
    dataIndex: 'name'
    }, {
    header: '所属部门',
    width: 80,
    dataIndex: 'department',
    renderer: rendererDepartmentCombobox,
    editor: new Ext.form.ComboBox({
    id: "cbdepartment", //必须有
    forceSelection: true,
    selectOnFocus: true,
    typeAhead: true,
    triggerAction: 'all',
    store: comboxDepartmentStore,
    mode: 'local',
    displayField: 'departmentname',
    valueField: 'departmentid',
    lazyRender: true
    })
    }],
    defaults: {
    zsortable: true,
    menuDisabled: false,
    width: 100
    }
    });

    var editGrid = new Ext.grid.EditorGridPanel({
    id: 'TestGrid',
    store: store, //EditorGridPanel使用的store
    trackMouseOver: true,
    disableSelection: false,
    clicksToEdit: 1, //设置点击几次才可编辑
    loadMask: true,
    autoHeight: true,
    cm: cm,
    sm: sm,
    viewConfig: {
    columnsText: '显示/隐藏列',
    sortAscText: '正序排列',
    sortDescText: '倒序排列',
    forceFit: true,
    enableRowBody: true
    },
    bbar: new Ext.PagingToolbar({
    pageSize: 25,
    store: store,
    displayInfo: true,
    displayMsg: '当前显示从{0}至{1}, 共{2}条记录',
    emptyMsg: "当前没有记录"
    })
    });

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表