extjs Grid 時,默認初始選中

最近在使用帶複選框grid 組件的時候發現了一個奇怪的問題,第一次載入這個grid 組件時就給這個grid 組件初始化數據並選中其中的某一項,但始終無法選中,經單步調試發現,選中行的方法已被執行了,只是在所有的東西都執行完後,grid 又刷新了一下,導致原先選中的項丟失。
  代碼如下:
Js代碼
Ext .onReady(function(){ 
    var data = [ 
        ['table1','column1','remark1'], 
        ['table2','column2','remark2'] 
    ]; 
    var store = new Ext .data.Store({ 
        proxy : new Ext .data.MemoryProxy(data), 
        reader : new Ext .data.ArrayReader({},[ 
            {name : 'tableName'}, 
            {name : 'columnName'}, 
            {name : 'remark'} 
        ]) 
    }); 
    var databindsm = new Ext .grid .CheckboxSelectionModel({handleMouseDown : Ext .emptyFn,singleSelect : true}); 
    var cm = new Ext .grid .ColumnModel([ 
        new Ext .grid .RowNumberer(), 
        databindsm, 
        {header : '表名',dataIndex : 'tableName',width : 145}, 
        {header : '字段名',dataIndex : 'columnName',width : 145}, 
        {header : '備註',dataIndex : 'remark',width : 145} 
    ]); 
    var grid = new Ext .grid .GridPanel({ 
        width : 570, 
        height : 240, 
        loadMark : true, 
        store : store, 
        cm : cm, 
        sm : databindsm 
    }); 
    var viewport = new Ext .Viewport({ 
        height : 240, 
        width : 570, 
        items : [grid
    }); 
    store.load(data); 
    alert("aa"); 
    grid .getSelectionModel().selectRow(1,true); 
    alert("bb"); 
}); 

  經查發現,原來是ext 的mvc模式在作怪,源碼中有如下方法:
Js代碼
// private 
    afterRender : function(){ 
        Ext .grid .GridPanel.superclass.afterRender.call(this); 
        this.view.layout(); 
        if(this.deferRowRender){ 
            this.view.afterRender.defer(10, this.view); 
        }else{ 
            this.view.afterRender(); 
        } 
        this.viewReady = true; 
    }, 

  在render數據後並沒有顯示頁面,而是延遲渲染view,我們在view後再去選中,雖然設置了選中,但被延遲的渲染覆蓋掉了,所以導致邏輯正確而顯示不正確的結果。
  解決辦法:
  1、靜態store:在grid 中加上一個配置項 deferRowRender:false(不執行默認的render代碼);
  2、動態store:使用store的load事件,在裝載後進行選中
Js代碼
grid .store.on("load",function(){ 
        grid .getSelectionModel().selectRow(1,true); 
    }); 

 

From : http://kakarot-java.javaeye.com/blog/504345

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章