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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
javascript冒泡排序小结
Apr 10 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python调用fortran模块
2016/04/08 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python学习必备知识汇总
2017/09/08 Python
python3.7 的新特性详解
2019/07/25 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
致短跑运动员广播稿
2014/01/09 职场文书
关于工资低的辞职信
2014/01/14 职场文书
大学生自我鉴定书
2014/03/24 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
大学生个人总结范文
2015/02/15 职场文书
个人政治思想总结
2015/03/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书