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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
JS创建自定义对象的六种方法总结
Dec 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正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
第一节英语课开场白
2015/06/01 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript