JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色

NO IMAGE

表格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: '標題'
}

您可能感興趣的文章:

js css繪製顏色動態變化的圈中圈效果基於javascript實現隨機顏色變化效果js點選列表文字對應該行顯示背景顏色的實現程式碼JavaScript取得WEB安全顏色列表的方法javascript實現rgb顏色轉換成16進位制格式javascript css3 實現動態按鈕選單特效APP中javascript css3實現下拉重新整理效果js 獲取和設定css3 屬性值的實現方法js 顏色選擇器(相容firefox)JavaScript獲取圖片畫素顏色並轉換為box-shadow顯示