ExtJs学习记录(一)

学习ExtJs的GridPanel控件,今天要实现在载入数据的时候增加Loading的动画,结果整了我一个小时,看原来的代码

 

Ext.onReady(function(){    
        var proxy= new Ext.data.HttpProxy({url:'GridPanelData.asmx/GetBasicGridPanelData',
                                            method:'post',
                                            headers:{contentType:'application/json;utf-8'},
                                            params:{}
                                            });
        //定义一个数据单元
         var UserInfo=Ext.data.Record.create([
                    {name:'DEPT_NM'},
                    {name:'PNL_NM'},
                    {name:'PNL_NO'},                  
                    {name:'USER_ID'},
                    {name:'LOCAT_NM'}
                     ]);
        //定义reader
         var reader=new Ext.data.XmlReader({
                    record:"UserInfo",
                    },UserInfo);
        var store=new Ext.data.Store({proxy:proxy,reader:reader});
        store.load();
        var grid=new Ext.grid.GridPanel({
            store:store,
            height:500,
            width:500,
            title:'基本网格示例',
            columnLines:true,
            autoExpandColumn:'LOCAT_NM',//多余宽度
             loadMask:true,//显示Loading动画
             columns:[
                        {id:'USER_ID',header:"排序ID",width:70,sortable:true,dataIndex:'USER_ID'},
                        {id:'PNL_NM',header:"用户名称",width:75,sortable:true,dataIndex:'PNL_NM'},
                        {id:'PNL_NO',header:"工号",width:75,sortable:true,dataIndex:'PNL_NO'},
                        {id:'DEPT_NM',header:"部门",width:100,sortable:true,dataIndex:'DEPT_NM'},
                        {id:'LOCAT_NM',header:"处别",width:100,sortable:true,dataIndex:'LOCAT_NM'}                
                    ]
            }); 
            
            grid.render('grid-example');
            
            grid.getSelectionModel().selectFirstRow();
    });

 

 

 

开始以为是ie的问题,换firefox,opera都没有解决,然后看示例中的paging.htm页面,一样的设置 loadMask:true,它的就有效果

在去看了这篇文章,发现可能与store的加载有关,

我这里的写法是先将数据加载了,然后才构建GridPanel的显示,但是属性loadMask是同store有关,所有就不会有效果.

将 store.load() 移动到grid.render('grid-example')后面,再次打开IE,问题解决.

修改后的代码

 Ext.onReady(function(){    
        var proxy= new Ext.data.HttpProxy({url:'GridPanelData.asmx/GetBasicGridPanelData',
                                            method:'post',
                                            headers:{contentType:'application/json;utf-8'},
                                            params:{}
                                            });
        //定义一个数据单元
         var UserInfo=Ext.data.Record.create([
                    {name:'DEPT_NM'},
                    {name:'PNL_NM'},
                    {name:'PNL_NO'},                  
                    {name:'USER_ID'},
                    {name:'LOCAT_NM'}
                     ]);
        //定义reader
         var reader=new Ext.data.XmlReader({
                    record:"UserInfo",
                    },UserInfo);
        var store=new Ext.data.Store({proxy:proxy,reader:reader});
        
        var grid=new Ext.grid.GridPanel({
            store:store,
            height:500,
            width:500,
            title:'基本网格示例',
            columnLines:true,
            autoExpandColumn:'LOCAT_NM',//多余宽度
            loadMask:true,//显示Loading动画
            columns:[
                        {id:'USER_ID',header:"排序ID",width:70,sortable:true,dataIndex:'USER_ID'},
                        {id:'PNL_NM',header:"用户名称",width:75,sortable:true,dataIndex:'PNL_NM'},
                        {id:'PNL_NO',header:"工号",width:75,sortable:true,dataIndex:'PNL_NO'},
                        {id:'DEPT_NM',header:"部门",width:100,sortable:true,dataIndex:'DEPT_NM'},
                        {id:'LOCAT_NM',header:"处别",width:100,sortable:true,dataIndex:'LOCAT_NM'}                
                    ]
            }); 
            
            grid.render('grid-example');
            store.load();
            grid.getSelectionModel().selectFirstRow();
    });