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等。
下面通过一段代码给大家介绍senchagridpanel编辑单元，具体代码如下所示：
{
xtype:'gridpanel',
region:'north',
height:150,
title:'MyGridPanel',
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]="mytest";
e.value="mytest";
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();
}
下面一段代码是关于senchagridpanel改变单元格颜色
标题列包含审核通过则绿色,包含拒绝为红色:
{
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";
}
elseif(record.data.Content.indexOf('拒绝')!=-1)
{
metaData.style="color:red";
}
returnvalue;
}
,
width:'*',
dataIndex:'Title',
text:'标题'
}