Utilisez Sencha Gridpanel pour modifier les cellules et changer les couleurs des cellules dans les compétences JavaScript_javascript

Présentation du GridPanel

La fonction de tableau dans ExtJS est très puissante, comprenant le tri, la mise en cache, le glisser, le masquage d'une certaine colonne, l'affichage automatique des numéros de ligne, le résumé des colonnes, l'édition de cellules et d'autres fonctions pratiques.

La table est définie par la classe Ext.grid.GridPanel, héritée de Panel, et son xtype est grid. Dans ExtJS, la table Grid doit contenir des informations de définition de colonne et spécifier le magasin de stockage de données de la table. Les informations sur les colonnes de la table sont définies par la classe Ext.grid.Column (précédemment définie par Ext.grid.ColumnModel), et le stockage des données de la table est défini par Ext.data.Store. Le stockage des données est divisé en JsonStore. , SimpleStroe et GroupingStore en fonction de l'attente des données analysées.

Ce qui suit vous présentera l'unité d'édition Sencha GridPanel à travers un morceau de code. Le code spécifique est le suivant :

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

Le code suivant concerne la modification de la couleur des cellules dans le panneau de grille sencha

La colonne titre contient du vert si approuvé et du rouge si rejeté :

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