在ExtJS中突出顯示/選擇網格行

我是Ext JS的新手。我正在使用一個網格面板，在該面板中，當我選擇/單擊任何行時，網格下方的面板中將顯示與所選行相關的某些數據。另外，當窗口加載時，默認情況下應該選擇/突出顯示第一個窗口。目前網格&面板顯示正常。即使與選定行相關的數據顯示在面板中，但該行仍未突出顯示。我嘗試了grid.focusRow(0) & grid.getRow(0).highlight()方法，但它們不起作用。以下是我的代碼。在ExtJS中突出顯示/選擇網格行

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

從數據存儲中的數據被加載&正常顯示，但只是該行不突出。誰能告訴我我錯了哪裏？

來源

2012-01-03 Shreya Pandit

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)

來源

2012-01-03 19:06:17 Li0liQ

嗨，感謝您的回覆。我已經嘗試過這些方法，但他們不工作。我的網格已完成，但不知何故，我無法突出第一行。有沒有其他方法？ – 2012-01-04 11:52:56

你提到的方法有錯誤嗎？所有可能的解決方法將在未來給您帶來額外的問題，因此您最好在嘗試任何自制之前嘗試獲取現有的方法。 – Li0liQ 2012-01-04 15:42:45

'getView（）。getRow'在ExtJS 4中不存在;使用'getView（）。getNode'。 – 2013-10-31 11:29:07

要在特定索引中選擇一行，使用選擇模型。

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

來源

2013-09-11 17:27:11 Malissa

組件：Ext.grid.Panel

版本：4.0.0

要選擇一個項目，刪除以前的選擇：

grid.getSelectionModel().select(0);

要選擇一個項目並保留以前的選擇：

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

來源

2013-10-01 11:59:02

太棒了:)它對我很好，謝謝:) – 2018-03-08 14:45:04

在ExtJS中突出顯示/選擇網格行

回答

相關問題