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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
面包屑导航详解
Dec 07 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 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
PHP与javascript对多项选择的处理
2006/10/09 PHP
PHP Google的translate API代码
2008/12/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python赋值操作方法分享
2013/03/23 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python数据结构之翻转链表
2017/02/25 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python 含参构造函数实例详解
2017/05/25 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python3字符串操作总结
2019/07/24 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python属于解释语言吗
2020/06/11 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
如何利用cmp命令比较文件
2016/04/11 面试题
门卫工作岗位职责
2013/12/17 职场文书
财政局长自荐信范文
2013/12/22 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
网络编辑岗位职责
2014/03/18 职场文书
学历公证委托书
2014/04/09 职场文书
公民代理授权委托书
2014/09/24 职场文书
初中语文教学研修日志
2015/11/13 职场文书