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 相关文章推荐
理解Javascript_12_执行模型浅析
Oct 18 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
Javascript模拟实现new原理解析
Mar 03 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
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
深入理解PHP中的global
2014/08/19 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
PHP实现计算器小功能
2020/08/28 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
javascript中的面向对象
2017/03/30 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
python中pdb模块实例用法
2021/01/15 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
春季运动会广播稿大全
2014/02/19 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2015年国培研修感言
2015/08/01 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL