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 浮动广告实现代码
Dec 25 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 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安装为Apache DSO
2006/10/09 PHP
如何过滤高亮显示非法字符
2006/10/09 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
简单实现js拖拽效果
2017/07/25 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
python基础教程项目二之画幅好画
2018/04/02 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
管理岗位竞聘演讲稿
2014/08/18 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python