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 相关文章推荐
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
javascript函数式编程基础
Sep 15 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php的socket编程详解
2016/11/20 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
深入解析Python小白学习【操作列表】
2019/03/23 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
毕业生医学检验求职信
2013/10/16 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
农业项目建议书
2014/08/25 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
玄武湖导游词
2015/02/05 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
员工试用期工作总结
2019/06/20 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python