在 ExtJS 中突出显示/选择网格行 [英] Highlighting/Selecting grid row in ExtJS

问题描述

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

I am newbie to Ext JS. I am working on a grid panel in which when I select/click any of the rows, then certain data related to the selected row is displayed in the panel below the grid. Also when the window is loaded the first should be selected/highlighted by default. Currently the grid & panel is displayed properly. Even the data related to the selected row is displayed in the panel but the row is not getting highlighted. I have tried the grid.focusRow(0) & grid.getRow(0).highlight() methods but they are not working. Below is my code.

//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

来自数据存储的数据被加载&正确显示，但只有该行没有突出显示.谁能告诉我哪里出错了?

The data from the datastore is loaded & displayed properly but just the row is not highlighted. Can anyone tell me where I went wrong?

推荐答案

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

There is no getRow method in Ext.grid.GridPanel. However, there is one in Ext.grid.GridView.

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

To highlight the row you should do the following:

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

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

To perform row selection you are using grid's SelectionModel:

grid.getSelectionModel().selectRow(0)

这篇关于在 ExtJS 中突出显示/选择网格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！