JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色


Posted in Javascript onNovember 26, 2015

表格GridPanel概述

      ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

下面通过一段代码给大家介绍sencha gridpanel 编辑单元,具体代码如下所示:

{
xtype: 'gridpanel',
region: 'north',
height: 150,
title: 'My Grid Panel',
store: 'A_Test_Store',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Content',
text: 'Content'
},
{
xtype: 'gridcolumn',
dataIndex: 'Time',
text: 'Time'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1, //点击单元格编辑
listeners: {
beforeedit: {
fn: me.onCellEditingBeforeEdit,
scope: me
},
validateedit: {
fn: me.onCellEditingValidateedit,
scope: me
}
}
})
]
}
onCellEditingBeforeEdit: function(editor, e, eOpts) {//动态赋值用.正常情况下不需要该事件.
   e.record.data[e.field]= "my test";
e.value="my test";
e.record.commit(); //提交,不提交无效
}
onCellEditingValidateedit: function(editor, e, eOpts) {
if(e.row==1) //验证逻辑
{
e.cancel=true; //取消
e.record.data[e.field] = e.value;
}
e.record.commit();
}

下面一段代码是关于sencha gridpanel改变单元格颜色

标题列包含 审核通过则绿色,包含拒绝为红色:

{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'data-qtip="'+record.data.Content+'"';

if(record.data.Content.indexOf('审核通过')!=-1)
{
metaData.style="color:green";
}
else if(record.data.Content.indexOf('拒绝')!=-1)
{
metaData.style="color:red";
}
return value;
}
,
width: '*',
dataIndex: 'Title',
text: '标题'
}

Javascript 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js里的prototype使用示例
Nov 19 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
基于jquery实现全屏滚动效果
Nov 26 #Javascript
javascript给span标签赋值的方法
Nov 26 #Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 #Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 #Javascript
js检测iframe是否加载完成的方法
Nov 26 #Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
深入浅析同源策略和跨域访问
Nov 26 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
vue中的scope使用详解
2017/10/29 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
记录Django开发心得
2014/07/16 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python之os操作方法(详解)
2017/06/15 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
请客吃饭开场白
2015/06/01 职场文书
python中%格式表达式实例用法
2021/06/18 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript