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: "标题"}