在 ExtJS 中突出显示/选择网格行

Posted 2023-02-26

【中文标题】在 ExtJS 中突出显示/选择网格行

【英文标题】：Highlighting/Selecting grid row in ExtJS

【发布时间】：2012-01-03 18:23:46

【问题描述】：

我是 Ext JS 的新手。我正在使用网格面板，当我选择/单击任何行时，与所选行相关的某些数据将显示在网格下方的面板中。此外，在加载窗口时，默认情况下应选择/突出显示第一个窗口。 目前网格和面板显示正确。即使与所选行相关的数据也显示在面板中，但该行没有突出显示。我尝试了grid.focusRow(0) 和grid.getRow(0).highlight() 方法，但它们不起作用。下面是我的代码。

//the js file code
initComponent : function()  //within the window instance

    var single = false;
    var store = new Ext.data.XmlStore(//all necessary fields added); //store
    HttpUtil.syncCall(this.url, "GET", this.loadStore, store,this);
    var acctTplMarkup = [//the fields here are displayed on row selection ];
                /*The template for displaying the details of the selected row */
                 this.acctTpl = new Ext.Template(acctTplMarkup);
    //check for request type, if type is range of checks create the grid
    if (single == false) 
        var gridView = new Ext.grid.GridView();
        var colModel = new Ext.grid.ColumnModel([ 
            header : 'Status',
            dataIndex : 'status'
        , 
            header : 'Message',
            dataIndex : 'message'
         ]);
        var selModel = new Ext.grid.RowSelectionModel(
            singleSelect : true
        );
        grid = new Ext.grid.GridPanel(
                                          ...
                        listeners : 
                render : function(grid) 
                    Ext.getCmp('check').store.on('load',function(store, records, options)  //check is the id value for the window instance
                         grid.getSelectionModel().selectFirstRow(); 
                    );
                
            
    ); //gridPanel
     //if
    /* If request type is range select then display the grid  */
                ... 
    if (single == false) 
    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) 
Ext.getCmp('check').acctTpl.overwrite(Ext.getCmp('detailPanel').body, r.data);
        ); //rowselect
     //if

    Ext.apply(this, 
                                     ...
            listeners : 
            'afterrender' : function()
            Ext.getCmp('check').acctTpl.overwrite(Ext.getCmp('detailPanel').body, this.store.getAt(0).data,true);
            
        
    );
    Check.superclass.initComponent.apply(this, arguments);

, //initComponent

数据存储中的数据已正确加载和显示，但只有行未突出显示。谁能告诉我哪里出错了？

【参考方案1】：

Ext.grid.GridPanel 中没有 getRow 方法。但是，Ext.grid.GridView 中有一个。

要突出显示该行，您应该执行以下操作：

var row = grid.getView().getRow(0); // Getting htmlElement here
Ext.get(row).highlight(); // Getting element wrapper and using its "highlight" method

要执行行选择，您正在使用网格的 SelectionModel：

grid.getSelectionModel().selectRow(0)

【讨论】：

您好，感谢您的回复。我已经尝试过这些方法，但它们不起作用。我的网格是完整的，但不知何故我无法突出显示第一行。有没有其他办法？

您提到的方法是否有任何错误？所有可能的解决方法都会在未来给您带来额外的问题，因此您最好在尝试任何自制之前尝试让现有方式工作。

getView().getRow 在 ExtJS 4 中不存在；使用getView().getNode。

【参考方案2】：

组件：Ext.grid.Panel

版本：4.0.0

要选择一个项目并删除先前的选择：

grid.getSelectionModel().select(0);

选择一个项目并保留之前的选择：

grid.getSelectionModel().select(0, true);

【参考方案3】：

要选择特定索引处的行，请使用选择模型。

Ext.grid.GridPanel.getView().getSelectionModel().select(index);

【参考方案4】：

在 Sencha 7 中，您可以通过 grid.setSelection(item); 选择特定行

参考https://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-setSelection