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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
javascript 中的继承实例详解
May 05 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
es6中reduce的基本使用方法
Sep 10 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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
杏林同学录(六)
2006/10/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python 阶乘累加和的实例
2019/02/01 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
电大自我鉴定范文
2013/10/01 职场文书
单位门卫岗位职责
2013/12/20 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
寻找成龙观后感
2015/06/12 职场文书
开业庆典致辞
2015/08/01 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers