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 表单中textarea字数限制实现代码
Dec 07 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
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 SEO优化之URL优化方法
2011/04/21 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
实例解析php的数据类型
2018/10/24 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue实现登录功能
2020/12/31 Vue.js
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python tcp传输代码实例解析
2020/03/18 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
《钱学森》听课反思
2014/03/01 职场文书
《锄禾》教学反思
2014/04/08 职场文书
公司开除员工通知
2015/04/22 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python