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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
javascript实现遮罩层动态效果实例
May 14 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
main.php
2006/12/09 PHP
php时间不正确的解决方法
2008/04/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
django使用多个数据库的方法实例
2021/03/04 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
离职感谢信
2015/01/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
工会经费申请报告
2015/05/15 职场文书
倡议书怎么写?
2019/04/11 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
超外差式晶体管收音机的组装与统调
2021/04/22 无线电