Extjs EditorGridPanel中ComboBox列的显示问题


Posted in Javascript onJuly 04, 2011

为了解决这个问题需要在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: "当前没有记录" 
}) 
});
Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 #Javascript
JS分割字符串并放入数组的函数
Jul 04 #Javascript
js列举css中所有图标的实现代码
Jul 04 #Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 #Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 #Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 #Javascript
js静态方法与实例方法分析
Jul 04 #Javascript
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php数组查找函数总结
2014/11/18 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
python mqtt 客户端的实现代码实例
2019/09/25 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
儿科护理实习自我鉴定
2013/09/19 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
一年级学生评语大全
2014/04/21 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
感恩教育主题班会
2015/08/12 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
高中班主任寄语
2019/06/21 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers