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精华代码集
Jan 24 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
JavaScript 创建对象
2009/07/17 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Python fileinput模块使用实例
2015/06/03 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
思想汇报范文
2013/11/04 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers