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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 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
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
jQuery each()小议
2010/03/18 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
javascript 实现map集合
2015/04/03 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python 爬虫的工具列表大全
2016/01/31 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
事业单位请假制度
2014/01/13 职场文书
模具毕业生推荐信
2014/02/15 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
作风建设剖析材料
2014/10/06 职场文书
民政局未婚证明
2015/06/15 职场文书
小学运动会前导词
2015/07/20 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
开学典礼致辞
2015/07/29 职场文书
大学军训口号大全
2015/12/24 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis