Ext grid 改变行背景色

有时候我们会要求改变grid的某一行背景颜色,根据特定的条件,这时候可以用viewConfig这个方法。

Ext.util.CSS.createStyleSheet('.ts {background:#9a9a9bc2;}');//单独创建css样式
{
                    xtype: 'gridbase',
                    region: 'north',
                    title: '不含增值税(单位:万元)',
                    titleAlign: "center",
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            weight: -10,
                            items: [
                                {
                                    xtype: 'mybutton',
                                    btnType: 'winsave',
                                    handler: Ext.bind(me._save, me)
                                }
                            ]
                        }
                    ],
                    id: 'grid1',
                    plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],
                    store: _store1,
                    pagingtoolbar: false,
                    isLineFeed: true,
                    viewConfig: {
                        getRowClass: function (record, rowIndex, rowParams, store) {
                        //设置条件,然后返回想展示的样式
                            if (rowIndex === 1 || rowIndex === 3) {
                                return 'ts';//样式名字
                            } else {
                                return ""
                            }

                        }

                    },
                    columns: {
                        defaults: {
                            align: 'center',
                            sortable: false,
                            flex: 1,
                            minWidth: 100,
                            menuDisabled: true,
                            defaults: {
                                sortable: false,
                                menuDisabled: true,
                                flex: 1,
                                minWidth: 150,
                                align: 'center',
                                editor: {
                                    hideTrigger: true,
                                    xtype: 'numberfield'
                                }
                            }
                        },
                        items: []//表头
                    },

这里写图片描述

猜你喜欢

转载自blog.csdn.net/ann_mi/article/details/80495752