ExtJs中Store加载(load)时候提示信息

ExtJs的Store在加载时候一般是延迟加载的，这时候Grid就会先出现一片空白，等加载完成后才出现数据；因此，我们需要给它添加一个提示信息！

解决方案：

1.给store添加监听器，监听beforeload事件，加载前弹出提示框，加载完成后关闭提示框

2.callback为load的回调函数，在加载完成后执行，因此关闭提示框由它完成；

3.一定要给store的reload方法也添加callback函数，已关闭提示框

例子主要代码如下：

[html] view plain copy

print ?

1. var msgTip;          // 一定要定义在使用前，且定义为全局变量  
2. var reportStore=new Ext.data.Store({  
3.       proxy:reportProxy,  
4.        reader:reportReader,  
5.       listeners:{  
6.              beforeload:function(){  
7.                    msgTip = Ext.MessageBox.show({  
8.                    title:'提示',  
9.                    msg:'页面报表统计信息刷新中,请稍后......'  
10.                 });  
11.        }  
12.    }  
13. });  
14.   
15. reportStore.load({  
16.     callback: function(records, options, success){  
17.               msgTip.hide();    // 加载完成，关闭提示框  
18.       }  
19. });  

var msgTip;          // 一定要定义在使用前，且定义为全局变量
var reportStore=new Ext.data.Store({
      proxy:reportProxy,
       reader:reportReader,
      listeners:{
             beforeload:function(){
                   msgTip = Ext.MessageBox.show({
                   title:'提示',
                   msg:'页面报表统计信息刷新中,请稍后......'
                });
       }
   }
});

reportStore.load({
    callback: function(records, options, success){
              msgTip.hide();    // 加载完成，关闭提示框
      }
});

 

注意：如果有调用reload来重新刷新页面，reload也要添加callback函数来关闭提示框

[html] view plain copy

print ?

1. reportStore.reload({  
2.          callback: function(records, options, success){  
3.             msgTip.hide(); // 加载完成，关闭提示框  
4.          }  
5. });  

reportStore.reload({
         callback: function(records, options, success){
            msgTip.hide(); // 加载完成，关闭提示框
         }
});

 

--------------------------------------Store.load简介-----------------------------

store.load({
       params: {start:0,limit:20},    //参数
            // callback是加载完毕时执行的回调函数，它包含3个参数：records参数表示获得的数据，
            // options表示执行load()时传递的参数，success表示是否加载成功。
       callback: function(records, options, success){
                  Ext.Msg.alert('info', '加载完毕');
         },
        scope: store, //Scope用来指定回调函数执行时的作用域
           //Add为true时，load()得到的数据会添加在原来的store数据的末尾，
          //否则会先清除之前的数据，再将得到的数据添加到store中
　　add: true
});