解决Grid组件无法初始选中问题

　　最近在使用带复选框grid组件的时候发现了一个奇怪的问题，第一次载入这个grid组件时就给这个grid组件初始化数据并选中其中的某一项，但始终无法选中，经单步调试发现，选中行的方法已被执行了，只是在所有的东西都执行完后，grid又刷新了一下，导致原先选中的项丢失。
　　代码如下：

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模式在作怪，源码中有如下方法：

// 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事件，在装载后进行选中

grid.store.on("load",function(){
		grid.getSelectionModel().selectRow(1,true);
	});

评论

2 楼 readythink 2010-04-06  

谢谢,好!

1 楼 zhuliyong 2009-07-02  

好，