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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
OpenLayers3实现图层控件功能
Sep 25 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
Seajs的学习笔记
2014/03/04 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
Python温度转换实例分析
2018/01/17 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
2014年党员承诺书范文
2014/05/20 职场文书
幼儿园教师自我评价
2015/03/04 职场文书