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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
微信小程序开发探究
Dec 27 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue中的scope使用详解
Oct 29 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
express异步函数异常捕获示例详解
Nov 30 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类中private属性继承问题分析
2012/11/01 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
php中yii框架实例用法
2020/12/22 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python psutil库安装教程
2018/03/19 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python调用服务接口的实例
2019/01/03 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
安全生产检查通报
2014/01/29 职场文书
《云房子》教学反思
2014/04/20 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
学生手册评语
2014/05/05 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
感恩教师主题班会
2015/08/12 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python