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 学习书 推荐
Jun 13 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
Vue实现手机计算器
Aug 17 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javascript工具库代码
2012/03/29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python subprocess模块详细解读
2018/01/29 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python让函数不返回结果的方法
2020/06/22 Python
PyTorch-GPU加速实例
2020/06/23 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python 实现图片裁剪小工具
2021/02/02 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
个人承诺书格式范文
2015/04/29 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
Java界面编程实现界面跳转
2022/06/16 Java/Android
Go语言编译原理之变量捕获
2022/08/05 Golang