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实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
超简单的微信小程序轮播图
Nov 22 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 缓冲的免费实现方法
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
JS定时器实例
2013/04/17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
财务学生的职业生涯发展
2014/02/11 职场文书
升职演讲稿范文
2014/05/23 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
PHP命令行与定时任务
2021/04/01 PHP
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
详解JS数组方法
2021/11/20 Javascript