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 相关文章推荐
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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下获取客户端ip地址的函数
2010/03/15 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
jquery动态加载图片数据练习代码
2011/08/04 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
pandas重新生成索引的方法
2018/11/06 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python算的上脚本语言吗
2020/06/22 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
什么是组件架构
2016/05/15 面试题
学生实习推荐信范文
2013/11/26 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
高中生毕业评语
2014/12/30 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫