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 相关文章推荐
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
JS前端加密算法示例
Dec 22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
JS实现音量控制拖动
Jan 15 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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 设计模式系列之 specification规格模式
2016/01/10 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
一篇不错的Python入门教程
2007/02/08 Python
python动态性强类型用法实例
2015/05/09 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python实现学生通讯录管理系统
2021/02/25 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
大学生写自荐信的技巧
2014/01/08 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
社区文艺活动方案
2014/08/19 职场文书
干部考核工作总结2015
2015/07/24 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python