使用extjs的时候,渲染界面需要多加注意,注意各个组件之间的渲染顺序,渲染前能做什么,渲染后做什么,有些做过的操作会不会被重新渲染冲掉,比如我刚刚遇到的问题,我在一个window的gird做了默认选中的操作,简简单单的一个逻辑,结果不管怎么调用select也选不到,后来发现是window在show的时候重新渲染把我选中的操作冲掉了,我改变了下选中逻辑和窗口show的顺序就完美解决问题了。
借鉴一片文章:
最近在使用带复选框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;
},
代码如下:
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);
});
load:function(store,sEops){
Ext.getCmp(“DiagnosisPumpingUnit_SingleDinagnosisAnalysis_Id”).getSelectionModel().select(0, true);
}
}
Ext.getCmp(“DiagnosisPumpingUnit_SingleDinagnosisAnalysis_Id”).getSelectionModel().select(0, true);
}
}
总结:做界面时候,加载顺序,渲染顺序需要特别注意。