Gunakan panel grid sencha untuk mengedit sel dan menukar warna sel dalam kemahiran JavaScript_javascript

Gambaran Keseluruhan GridPanel

Fungsi jadual dalam ExtJS sangat berkuasa, termasuk pengisihan, caching, menyeret, menyembunyikan lajur tertentu, memaparkan nombor baris secara automatik, ringkasan lajur, penyuntingan sel dan fungsi praktikal lain.

Jadual ditakrifkan oleh kelas Ext.grid.GridPanel, diwarisi daripada Panel dan xtypenya ialah grid. Dalam ExtJS, Grid jadual mesti mengandungi maklumat definisi lajur dan menentukan Stor storan data jadual. Maklumat lajur jadual ditakrifkan oleh kelas Ext.grid.Column (sebelum ini ditakrifkan oleh Ext.grid.ColumnModel), dan storan data jadual ditakrifkan oleh Ext.data.Store Storan data dibahagikan kepada JsonStore , SimpleStroe dan GroupingStore mengikut menunggu data yang dihuraikan.

Yang berikut akan memperkenalkan anda kepada unit penyuntingan panel grid sencha melalui sekeping kod Kod khusus adalah seperti berikut:

{
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();
}

Kod berikut adalah tentang menukar warna sel dalam panel grid sencha

Lajur tajuk mengandungi hijau jika diluluskan dan merah jika ditolak:

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