网格中的样式行

Question

我正在尝试创建一个网格，每一行都有不同的样式（字体、颜色、背景颜色等）。样式位于字符串数组中（每个字符串都有 css 代码），长度与网格中的行数相同。我的问题是我找不到将每一行的样式设置为存储在我的数组中的样式的解决方案。我创建的网格如下所示：

newGrid = Ext.create('Ext.ux.Grid', {
        store: tableStore,
        columns: gridColumns,
    });

数组看起来很像 styles[]

如有任何帮助，我们将不胜感激！

Answer 1

这里是working fiddle

var myStyles = [
        {
            backgroundColor: 'red'
        },
        {
            backgroundColor: 'green',
            fontWeight: 'bold'
        },
        {
            backgroundColor: 'blue'
        },
        {
            backgroundColor: 'yellow',
            fontStyle: 'italic'
        }
];

myStore.getData().each(function(record){
    // You can map grid store records with styles array in any other way,
    // for example purposes I just use row internalId
    var recordId = record.internalId - 1;

    for(var propertyName in myStyles[recordId ]) {
        myGridView.getRow(record).style[propertyName] = myStyles[recordId][propertyName];
    }
});

例如

Ext.view.Table.getRow() return HTMLElement so you can manipulate with it with JS any way you want, read HTMLElement.className and HTMLElement.style。

此外，通过添加更多代码，您可以根据例如记录某些属性值将样式数组映射到网格记录。

网格中的样式行

Style rows in grid

javascript

extjs

sencha-touch