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实现漂亮的动态信息提示效果
Aug 02 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
使用javascript获取页面名称
Dec 23 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jquery validate demo 基础
Oct 29 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
js简单倒计时实现代码
Apr 30 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
浅谈JavaScript节流和防抖函数
Aug 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
input的focus方法使用
2010/03/13 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
简单的分页代码js实现
2016/05/17 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python zip文件 压缩
2008/12/24 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python判断有效的数独算法示例
2019/02/23 Python
python字符串格式化方式解析
2019/10/19 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
python 解决函数返回return的问题
2020/12/05 Python
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
女大学生自我鉴定
2013/12/09 职场文书
汉语言文学职业规划
2014/02/14 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
情况说明书格式范文
2014/05/06 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript