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用户注册提示效果的简单实例
Aug 17 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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中MD5函数使用实例代码
2008/06/07 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Django时区详解
2019/07/24 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python 制作网站小说下载器
2021/02/20 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
家长对孩子评语
2014/01/30 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Django框架中视图的用法
2022/06/10 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS