最近在使用带复选框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);
});
分享到:
相关推荐
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs 4.0 Grid 单元格合并控件封装
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
Extjs动态Grid的生成 htm
在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到...
EXTJS Grid布局总结例子,含源代码。
Extjs Grid 操作大全,获取各种值和添加各种点击事件
NULL 博文链接:https://kohisa.iteye.com/blog/651399