我们如何在 ext js 4.2 中突出显示网格面板的行和列？

Posted 2023-02-26

【中文标题】我们如何在 ext js 4.2 中突出显示网格面板的行和列？

【英文标题】：how can we highlight the row and column of the gridpanel in ext js 4.2?

【发布时间】：2015-01-08 19:00:12

【问题描述】：

我们如何在选择网格面板时突出显示当前行和列？ 我可以突出显示行而不是列。

我正在使用 Extjs 4.2

【参考方案1】：

我已经做了一个完全符合你要求的例子。在下面的小提琴中检查。Running Example

                        Ext.onReady(function()

                        var store = Ext.create('Ext.data.ArrayStore', 
                        fields: [ 'price', 'change','location'],
                        data: [
                        [ 0, 0,'x'],
                        [ 2, 3,'y'],
                        [ 0, 1,'z'],
                        [ 2, 3,'p'],
                        [ 5, 6,'q'],
                        [ 0,0,'s']
                        ]
                        );

                        var grid = Ext.create('Ext.grid.Panel', 
                        title: 'Array Grid',
                        store: store,
                        cls:'custom-grid',
                        listeners:
                            cellclick:function( thiss, td, cellIndex, record, tr, rowIndex, e, eOpts )
                            //Removing previous selected column highlighted color
                             var gridCoulumnlength=grid.columns.length;
                                for(var i=0;i<gridCoulumnlength;i++)
                                    if(grid.columns[i].tdCls=="custom-column")
                                        grid.columns[i].tdCls="";
                                
                               // adding color to columns
                                grid.columns[cellIndex].tdCls="custom-column";
                                grid.getView().refresh();
                            

                        , 
                        columns: [
                            text: 'Price', width: 75, dataIndex: 'price',
                        text: 'Change', width: 75, dataIndex: 'change',
                        text: 'Location', width: 75, dataIndex: 'location'
                        ],
                        height: 200,
                        width: 200,
                        renderTo: Ext.getBody()
                        );

                        );

CSS：

            .custom-grid .x-grid-row-selected .x-grid-cell  
                background-color: #ff0 !important; 
                border-bottom-color: #999; 
                border-bottom-style: solid; 
                border-top-color: #999; 
                border-top-style: solid; 
            

            .x-grid-row .custom-column  
                background-color: #ecf; 
                color: #090; 
                font-weight: bold;