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 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
js 调用百度分享功能
Feb 27 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
windows下ipython的安装与使用详解
2016/10/20 Python
python生成随机图形验证码详解
2017/11/08 Python
python实现聊天小程序
2018/03/13 Python
Python切片操作深入详解
2018/07/27 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
自荐信如何制作?
2014/02/21 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
初中教师业务学习材料
2014/05/12 职场文书
爱我中华演讲稿
2014/05/20 职场文书
大学生活动总结模板
2014/07/02 职场文书
岗位职责范本大全
2015/02/26 职场文书