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 判断日期格式是否正确的实现代码
Jul 04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JavaScript实现点击图片换背景
Nov 20 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
js实现日期级联效果
2014/01/23 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
python字典的常用操作方法小结
2016/05/16 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
参观考察邀请函范文
2014/01/29 职场文书
服装发布会策划方案
2014/05/22 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
用Python写一个简易版弹球游戏
2021/04/13 Python