JavaScript中使用sencha gridpanel 編輯儲存格、改變儲存格顏色_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: '標題'}