Ext修改GridPanel数据和字体颜色、css属性等

下面我将给出关于“Ext修改GridPanel数据和字体颜色、css属性等”的完整攻略，希望对您有所帮助。

一、修改GridPanel数据

1.1 修改GridPanel中单元格数据

GridPanel中单元格数据的修改可以使用setData方法，该方法用于修改单元格中对应字段的值。示例代码如下：

// 创建GridPanel实例
var gridPanel = new Ext.grid.GridPanel({
  // 其他配置项
  columns: [{
    header: '姓名',
    dataIndex: 'name'
  }, {
    header: '年龄',
    dataIndex: 'age'
  }],
  store: new Ext.data.Store({
    // 其他配置项
    data: [{
      name: '小明',
      age: 18
    }, {
      name: '小红',
      age: 20
    }]
  })
});

// 获取第一个单元格，并修改对应数据
var cell = gridPanel.getView().getCell(0, 0); // 获取第一个单元格
var record = gridPanel.getStore().getAt(0); // 获取对应数据
record.set('name', '小绿'); // 修改对应数据
gridPanel.getView().refresh(); // 刷新GridPanel

1.2 修改GridPanel中一行数据

GridPanel中一行数据的修改可以使用getStore方法获取数据源，然后使用getAt方法获取对应行的数据，对数据进行修改即可。示例代码如下：

// 创建GridPanel实例
var gridPanel = new Ext.grid.GridPanel({
  // 其他配置项
  columns: [{
    header: '姓名',
    dataIndex: 'name'
  }, {
    header: '年龄',
    dataIndex: 'age'
  }],
  store: new Ext.data.Store({
    // 其他配置项
    data: [{
      name: '小明',
      age: 18
    }, {
      name: '小红',
      age: 20
    }]
  })
});

// 获取第一行数据，并修改对应数据
var record = gridPanel.getStore().getAt(0); // 获取对应行数据
record.set('name', '小绿'); // 修改对应数据
gridPanel.getView().refresh(); // 刷新GridPanel

二、修改GridPanel字体颜色和css属性

2.1 修改GridPanel中单元格字体颜色和css属性

GridPanel中单元格字体颜色和css属性的修改需要自定义列渲染器。使用渲染器可以实现自定义单元格的样式，根据不同的条件设置不同的样式。示例代码如下：

// 创建列渲染器
function rendererColor(value, metaData, record, rowIndex, colIndex, store) {
  if (value === '小红') {
    metaData.tdCls = 'red-font'; // 设置字体颜色
    metaData.tdAttr = 'style="background-color: #ffe5e5;"'; // 设置css属性
  } else {
    metaData.tdCls = 'normal-font'; // 设置字体颜色
    metaData.tdAttr = 'style="background-color: #fff;"'; // 设置css属性
  }
  return value;
}

// 创建GridPanel实例
var gridPanel = new Ext.grid.GridPanel({
  // 其他配置项
  columns: [{
    header: '姓名',
    dataIndex: 'name',
    renderer: rendererColor // 设置渲染器
  }, {
    header: '年龄',
    dataIndex: 'age',
    renderer: rendererColor // 设置渲染器
  }],
  store: new Ext.data.Store({
    // 其他配置项
    data: [{
      name: '小明',
      age: 18
    }, {
      name: '小红',
      age: 20
    }]
  })
});

2.2 修改GridPanel中一行数据字体颜色和css属性

GridPanel中一行数据字体颜色和css属性的修改需要对每个单元格进行样式设置，可以对每个单元格进行遍历，根据不同的条件设置不同的样式。示例代码如下：

// 创建GridPanel实例
var gridPanel = new Ext.grid.GridPanel({
  // 其他配置项
  columns: [{
    header: '姓名',
    dataIndex: 'name'
  }, {
    header: '年龄',
    dataIndex: 'age'
  }],
  store: new Ext.data.Store({
    // 其他配置项
    data: [{
      name: '小明',
      age: 18
    }, {
      name: '小红',
      age: 20
    }]
  })
});

// 获取第一行数据，并设置字体颜色和css属性
var row = gridPanel.getView().getRow(0); // 获取对应行元素
var cells = Ext.get(row).query('td'); // 获取行元素中的单元格元素
Ext.each(cells, function(cell, index) { // 遍历单元格元素，设置样式
  var name = cell.textContent; // 获取对应单元格的内容
  if (name === '小红') {
    Ext.get(cell).addCls('red-font'); // 设置字体颜色
    Ext.get(cell).applyStyles('background-color: #ffe5e5;'); // 设置css属性
  } else {
    Ext.get(cell).addCls('normal-font'); // 设置字体颜色
    Ext.get(cell).applyStyles('background-color: #fff;'); // 设置css属性
  }
});

以上就是关于“Ext修改GridPanel数据和字体颜色、css属性等”的完整攻略，希望对您有所帮助。