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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
Javascript的闭包详解
Dec 26 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 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动态生成javascript文件的2个例子
2014/04/11 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
js parseInt("08")未指定进位制问题
2010/06/19 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
简单实现python爬虫功能
2015/12/31 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
后备干部培训方案
2014/05/22 职场文书
软件售后服务方案
2014/05/29 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
golang中的空slice案例
2021/04/27 Golang
用python修改excel表某一列内容的操作方法
2021/06/11 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript