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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
vue组件生命周期详解
Nov 07 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
详解Python用户登录接口的方法
2019/04/17 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
详解python itertools功能
2020/02/07 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
PHP面试题附答案
2015/11/28 面试题
安全生产目标责任书
2014/04/14 职场文书
读书活动总结范文
2014/04/26 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
悬空寺导游词
2015/02/05 职场文书
美丽心灵观后感
2015/06/01 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏