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 19 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
js中日期的加减法
May 06 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
JavaScript中引用vs复制示例详析
Dec 06 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 删除cookie和浏览器重定向
2009/03/16 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
10个简化PHP开发的工具
2014/12/25 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
vue.js学习之UI组件开发教程
2017/07/03 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python微信公众号开发简单流程
2018/03/23 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Django 外键的使用方法详解
2019/07/19 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
感恩祖国演讲稿
2014/09/09 职场文书
英语邀请函范文
2015/02/02 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
React四级菜单的实现
2022/04/08 Javascript
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS