学习ExtJs的GridPanel控件,今天要实现在载入数据的时候增加Loading的动画,结果整了我一个小时,看原来的代码
1 Ext.onReady(function(){
2 var proxy= new Ext.data.HttpProxy({url:'GridPanelData.asmx/GetBasicGridPanelData',
3 method:'post',
4 headers:{contentType:'application/json;utf-8'},
5 params:{}
6 });
7 //定义一个数据单元
8 var UserInfo=Ext.data.Record.create([
9 {name:'DEPT_NM'},
10 {name:'PNL_NM'},
11 {name:'PNL_NO'},
12 {name:'USER_ID'},
13 {name:'LOCAT_NM'}
14 ]);
15 //定义reader
16 var reader=new Ext.data.XmlReader({
17 record:"UserInfo",
18 },UserInfo);
19 var store=new Ext.data.Store({proxy:proxy,reader:reader});
20 store.load();
21 var grid=new Ext.grid.GridPanel({
22 store:store,
23 height:500,
24 width:500,
25 title:'基本网格示例',
26 columnLines:true,
27 autoExpandColumn:'LOCAT_NM',//多余宽度
28 loadMask:true,//显示Loading动画
29 columns:[
30 {id:'USER_ID',header:"排序ID",width:70,sortable:true,dataIndex:'USER_ID'},
31 {id:'PNL_NM',header:"用户名称",width:75,sortable:true,dataIndex:'PNL_NM'},
32 {id:'PNL_NO',header:"工号",width:75,sortable:true,dataIndex:'PNL_NO'},
33 {id:'DEPT_NM',header:"部门",width:100,sortable:true,dataIndex:'DEPT_NM'},
34 {id:'LOCAT_NM',header:"处别",width:100,sortable:true,dataIndex:'LOCAT_NM'}
35 ]
36 });
37
38 grid.render('grid-example');
39
40 grid.getSelectionModel().selectFirstRow();
41 });
开始以为是ie的问题,换firefox,opera都没有解决,然后看示例中的paging.htm页面,一样的设置 loadMask:true,它的就有效果
在去看了这篇文章,发现可能与store的加载有关,
我这里的写法是先将数据加载了,然后才构建GridPanel的显示,但是属性loadMask是同store有关,所有就不会有效果.
将 store.load() 移动到grid.render('grid-example')后面,再次打开IE,问题解决.
修改后的代码
1 Ext.onReady(function(){
2 var proxy= new Ext.data.HttpProxy({url:'GridPanelData.asmx/GetBasicGridPanelData',
3 method:'post',
4 headers:{contentType:'application/json;utf-8'},
5 params:{}
6 });
7 //定义一个数据单元
8 var UserInfo=Ext.data.Record.create([
9 {name:'DEPT_NM'},
10 {name:'PNL_NM'},
11 {name:'PNL_NO'},
12 {name:'USER_ID'},
13 {name:'LOCAT_NM'}
14 ]);
15 //定义reader
16 var reader=new Ext.data.XmlReader({
17 record:"UserInfo",
18 },UserInfo);
19 var store=new Ext.data.Store({proxy:proxy,reader:reader});
20
21 var grid=new Ext.grid.GridPanel({
22 store:store,
23 height:500,
24 width:500,
25 title:'基本网格示例',
26 columnLines:true,
27 autoExpandColumn:'LOCAT_NM',//多余宽度
28 loadMask:true,//显示Loading动画
29 columns:[
30 {id:'USER_ID',header:"排序ID",width:70,sortable:true,dataIndex:'USER_ID'},
31 {id:'PNL_NM',header:"用户名称",width:75,sortable:true,dataIndex:'PNL_NM'},
32 {id:'PNL_NO',header:"工号",width:75,sortable:true,dataIndex:'PNL_NO'},
33 {id:'DEPT_NM',header:"部门",width:100,sortable:true,dataIndex:'DEPT_NM'},
34 {id:'LOCAT_NM',header:"处别",width:100,sortable:true,dataIndex:'LOCAT_NM'}
35 ]
36 });
37
38 grid.render('grid-example');
39 store.load();
40 grid.getSelectionModel().selectFirstRow();
41 });
posted @ 2009-12-29 16:03 燕七 阅读(186) 评论(0)
编辑