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

前端技术 2023/09/01 JavaScript

表格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: \'标题\'
}

本文地址：https://www.stayed.cn/item/3067

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案