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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jquery操作select方法汇总
Feb 05 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
javascript实现点击产生随机图形
Jan 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生成EXCEL的东东
2006/10/09 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Yii中表单用法实例详解
2016/01/05 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php实现生成验证码实例分享
2016/04/10 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
json数据与字符串的相互转化示例
2013/09/18 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Node.js console控制台简单用法分析
2019/01/04 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python去掉字符串中空格的方法
2014/03/11 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python中的yield from语法快速学习
2020/11/06 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
廉政文化进校园广播稿
2014/10/20 职场文书
运动会加油稿
2015/07/22 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python