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

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

}

以上就是本文章的内容，希望对大家有所帮助