ExtJs实现定时读取数据，动态加载…

这次的项目要求有一个养殖池的监测指标的动态展现，就是在系统的主页，展示出各个养殖池的实时动态数据。

数据由另外的一段程序，实时从硬件读取写进数据库，所以要做的就是定时去数据库去取数据就行了。

贴出来的代码，主要是实现的页面展示部分：

 

第一次载入页面后，养殖池读取一次数据，然后开始调用Ext.TaskMgr来实现动态的去发起请求

 

 

[java] view plain copy print ?

1. var task_CheckLoginState;//声明任务变量   
2.         task_RealTimeMointor = {  
3.             run : RealTimeMointor,//执行任务时执行的函数   
4.             interval : 10000  
5.             //任务间隔，毫秒为单位，这里是10秒   
6.         }  
7.         //Ext.TaskMgr.start(task_CheckLoginState);//初始化时就启动任务   
8.         //定时启动执行一次，启动TaskMgr，   
9.         begin = setInterval("Ext.TaskMgr.start(task_RealTimeMointor)",5000);　　//1000毫秒=1秒   
10.         function stopMonitor()  
11.         {  
12.             Ext.TaskMgr.stop(task_RealTimeMointor);  
13.         }  

var task_CheckLoginState;//声明任务变量 task_RealTimeMointor = { run : RealTimeMointor,//执行任务时执行的函数 interval : 10000 //任务间隔，毫秒为单位，这里是10秒 } //Ext.TaskMgr.start(task_CheckLoginState);//初始化时就启动任务 //定时启动执行一次，启动TaskMgr， begin = setInterval("Ext.TaskMgr.start(task_RealTimeMointor)",5000);　　//1000毫秒=1秒 function stopMonitor() { Ext.TaskMgr.stop(task_RealTimeMointor); }  

 

这就可以定时的调用RealTimeMointor函数 去执行发起请求

 

 

[javascript] view plain copy print ?

1. function RealTimeMointor() {  
2.             clearInterval(begin);//关闭setInterval();   
3.             Ext.Ajax.request({  
4.                    url: 'realtimemonitor_realtimeMonitorByWorkerShopId.action',  
5.                    disableCaching: true,//禁止缓存   
6.                    timeout: 60000,//最大等待时间,超出则会触发超时   
7.                    success: function(response, option)  
8.                    {  
9.                         if (!response || response.responseText == '') {//返回的内容为空,即服务器停止响应时   
10.                             Ext.TaskMgr.stop(task_CheckLoginState);  
11.                             Ext.MessageBox.show({  
12.                                 title: '错误',  
13.                                 msg: '在读取动态数据时返回了空数据，请确认您的设备问题，请重启浏览器再试！',  
14.                                 buttons: Ext.Msg.OK,  
15.                                 icon: Ext.MessageBox.ERROR,  
16.                                 fn: function(btn, text){  
17.                                     if (btn == 'ok') {  
18.                                           
19.                                     }  
20.                                 }  
21.                             });  
22.                             return;  
23.                         }  
24.                         else{  
25.                         var respText = Ext.util.JSON.decode(response.responseText); //解码JSON格式数据为一个对象     
26.                         //alert("daxiao==="+respText.info.length);    
27.                         insertIntoHtml(respText);  
28.                         //allPrpos(respText.info[1].monitorDetailInfoMap);     
29.                         //Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap);       
30.                         }  
31.                    },  
32.                     //请求失败时   
33.                    failure: function(data){  
34.                        Ext.MessageBox.show({  
35.                             title: '错误',  
36.                             msg: '在读取动态数据时时发生网络错误，请确认您已经链接网络后，重启浏览器再试！',  
37.                             buttons: Ext.Msg.OK,  
38.                             icon: Ext.MessageBox.ERROR,  
39.                             fn: function(btn, text){  
40.                                 if (btn == 'ok') {  
41.                                 }  
42.                             }  
43.                             });  
44.                        },  
45.                     //带的参数   
46.                    params: { workShopId: tempWorkShopId }  
47.                         });  
48.         }  

function RealTimeMointor() { clearInterval(begin);//关闭setInterval(); Ext.Ajax.request({ url: 'realtimemonitor_realtimeMonitorByWorkerS<wbr>hopId.action', disableCaching: true,//禁止缓存 timeout: 60000,//最大等待时间,超出则会触发超时 success: function(response, option) { if (!response || response.responseText == '') {//返回的内容为空,即服务器停止响应时 Ext.TaskMgr.stop(task_CheckLoginState); Ext.MessageBox.show({ title: '错误', msg: '在读取动态数据时返回了空数据，请确认您的设备问题，请重启浏览器再试！', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR, fn: function(btn, text){ if (btn == 'ok') { } } }); return; } else{ var respText = Ext.util.JSON.decode(response.responseText); //解码JSON格式数据为一个对象 //alert("daxiao==="+respText.info.length); insertIntoHtml(respText); //allPrpos(respText.info[1].monitorDetailInfoMap); //Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap); } }, //请求失败时 failure: function(data){ Ext.MessageBox.show({ title: '错误', msg: '在读取动态数据时时发生网络错误，请确认您已经链接网络后，重启浏览器再试！', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR, fn: function(btn, text){ if (btn == 'ok') { } } }); }, //带的参数 params: { workShopId: tempWorkShopId } }); }  

 

这个函数的url是请求数据的地址，返回的是一个json格式的数据，如何做请参照我的另外一篇文章

 

如何生成树 http://blog.youkuaiyun.com/peng_wu01/archive/2010/04/28/5538171.aspx；

struts.xml

 

[xhtml] view plain copy print ?

1. <</span>package name="edu.ldu.water.realtimemonitor.Action" extends="struts-default">  
2.     <</span>action name="realtimemonitor_*" class="RealTimeMonitorAction"  
3.         method="{1}">  
4.         <</span>result name="showAllPool">/realtime/realtimepool.jsp</</span>result>  
5.         <</span>result name="showAllPoolByAjax">/realtime/jsonaccepter.jsp</</span>result>  
6.     </</span>action>  
7. </</span>package>  

/realtime/realtimepool.jsp /realtime/jsonaccepter.jsp  

 

一定要注意一点就是 ，一定要写个页面接一下你要取的数据，这样才能知道你要转哪个JSON。

/realtime/jsonaccepter.jsp

 

[java] view plain copy print ?