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()返回HTMLElement，以便您可以使用JS以任何方式操作它，例如阅读HTMLElement.className和HTMLElement.style。

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

网格中的样式行

1 个答案: