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 相关文章推荐
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
用js编写留言板
Mar 17 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP goto语句用法实例
2019/08/06 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
python引用DLL文件的方法
2015/05/11 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
pycharm新建一个python工程步骤
2019/07/16 Python
使用python求解二次规划的问题
2020/02/29 Python
python中Django文件上传方法详解
2020/08/05 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
想学画画?python满足你!
2020/12/24 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
管理站站长岗位职责
2013/11/27 职场文书
运动会广播稿400字
2014/01/25 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
信息技术教学反思
2014/02/12 职场文书
音乐教育感言
2014/03/05 职场文书
父母对孩子的寄语
2014/04/09 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
Python中for后接else的语法使用
2021/05/18 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python