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 while语句和do while语句的区别分析
Dec 08 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JavaScript模拟实现网易云轮播效果
Apr 04 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
openPNE常用方法分享
2011/11/29 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
js实现楼层导航功能
2017/02/23 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python实现文字版扫雷
2020/04/24 Python
python实现五子棋程序
2020/04/24 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
七年级生物教学反思
2014/01/30 职场文书
怀念母亲教学反思
2014/04/28 职场文书
保护环境演讲稿
2014/05/10 职场文书
体育口号大全
2014/06/18 职场文书
服务员态度差检讨书
2014/10/28 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书