extjs中grid中嵌入动态combobox的应用


Posted in Javascript onJanuary 01, 2011

拿combobox的数据

comboDS = new Ext.data.JsonStore({ 
url : 'test.do', 
fields : [{ 
name : 'id' 
}, { 
name : 'display' 
}] 
});

combobox定义
combobox 中的id必须要有,后面要跟据id取combobox值。
var comboBox = new Ext.form.ComboBox({ 
id : "cb", //必须有 
typeAhead : true, 
readOnly : true, 
allowBlank : false, 
autoScroll : true, 
selectOnFocus : true, 
emptyText : '请选择...', 
store : comboDS, 
forceSelection : true, 
triggerAction : 'all', 
displayField : 'display', 
valueField : 'id' 
});

grid 的定义:
ds = new Ext.data.Store({ 
baseparams : { 
start : 0, 
limit : RowCount 
}, 
proxy : new Ext.data.HttpProxy({ 
url :'test2.do' 
}), 
reader : new Ext.data.JsonReader({ 
root : 'data', 
totalProperty : 'totalCount' 
}, [{ 
name : "bh" 
}, { 
name : "test" 
}]); 
}); 
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { 
header : "编号", 
dataIndex : "bh" 
}, { 
header : "测试", 
dataIndex : "test", 
renderer : renderer, 
editor : comboBox 
}]); 
grid = new Ext.grid.EditorGridPanel({ 
title : '测试', 
ds : ds, 
cm : cm, 
clicksToEdit : 1, 
viewConfig : { 
forceFit : true 
}, 
bbar : new Ext.PagingToolbar({ 
pageSize : RowCount, 
store : ds, 
displayInfo : true, 
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
emptyMsg : "没有记录" 
}) 
});

cm 的renderer函数
此方法为解决combobox修改后显示为id
function renderer(value, p, r) { 
var index = comboDS.find(Ext.getCmp('cb').valueField, value); 
var record = comboDS.getAt(index); 
var displayText = ""; 
if (record == null) { 
displayText = value; 
} else { 
displayText = record.data.display;// 获取record中的数据集中的display字段的值 
}
Javascript 相关文章推荐
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
基于iview的router常用控制方式
May 30 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
js注意img图片的onerror事件的分析
Jan 01 #Javascript
JavaScript 计算图片加载数量的代码
Jan 01 #Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 #Javascript
基于jQuery架构javascript基础体系
Jan 01 #Javascript
jQuery技巧总结
Jan 01 #Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 #Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 #Javascript
You might like
mayfish 数据入库验证代码
2010/04/30 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
JavaScript日历实现代码
2010/09/12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
详解Django配置优化方法
2019/11/18 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
网络安全方面的面试题
2016/01/07 面试题
软件配置管理有什么好处
2015/04/15 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书