2012-01-03 5 views
5

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 

데이터는 &가 제대로 표시되지만 단지 행이 강조되지로드됩니다. 아무도 내가 잘못한 곳을 말해 줄 수 있습니까?

답변

10

에는 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) 
+0

답변 해 주셔서 감사합니다. 나는 이미 그 방법을 시도했지만 그들은 작동하지 않습니다. 내 표가 완료되었지만 어떻게 든 첫 번째 행을 강조 표시 할 수 없습니다. 다른 방법이 있습니까? –

+0

언급 된 방법에 오류가 있습니까? 가능한 모든 해결 방법은 앞으로 추가 문제가 발생할 것이므로 자체 제작 한 것을 시도하기 전에 기존 방법을 사용하는 것이 좋습니다. – Li0liQ

+2

'getView(). getRow'는 ExtJS 4에 존재하지 않습니다; 'getView(). getNode'를 사용하십시오. –

1

는 특정 인덱스에서 행을 선택하려면 모델.

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

구성 요소 : Ext.grid.Panel

버전 : 4.0.0

하나 개의 항목을 선택하고 이전 선택을 제거하려면 :

grid.getSelectionModel().select(0); 

하나를 선택 항목을 선택하고 이전 선택 유지 :

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

그레이트 :) 그것은 나를 위해 잘 작동 감사합니다 :) –