EXTJS 如何实现类似comet 异步刷新grid(自动刷新)

原理:变更思路,通过客户端解决问题。
知识要点
1.在Ext.data.Store中添加刷新数据的计划任务。
2.在beforeload中设置控制参数。
3.grid绑定静态的Store,该Store不和服务器端打交道
4.通过新的Store从服务器端取得单步的记录赋值给grid绑定的store

 
该模块用于测试日志的展示。
代码如下:
function load_task_excute_result(taskid)
{

Ext.override(Ext.data.Store, {
startAutoRefresh : function(interval, params, callback, refreshNow){
if(refreshNow){
this.load({params:params, callback:callback});
}
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.load.createDelegate(this, [{params:params, callback:callback}]), interval*1000);
}
});

var caseid = -1;
// **每行测试任务格式**/
var task_result_record = Ext.data.Record.create([{
name : 'testcasename',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'status',
type : 'int'
}, {
name : 'status_str',
type : 'string'
}, {
name : 'caseid',
type : 'int'
}]);

var taskresult_list_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetTaskResult',
method : 'POST'
}),
reader : new Ext.data.JsonReader({
root : "root",
id : 'taskresult_list_grid_store',
totalProperty : 'totalCount'
}, task_result_record)
});




bt_new = new Ext.Button({
xtype : 'button',
text : '空格',
handler : reload_data
});


p_buttons = new Ext.Panel({
xtype : 'panel',
layout : 'column',
border : true,
items : [bt_new]
});



var taskresult_list_grid = new Ext.grid.GridPanel({
store : taskresult_list_grid_store,
id:'taskresult_list_grid',
height : 630,
columnLines : false,
tbar : [p_buttons],
autoScroll:true,
columns : [{
id : 'testcasename',
header : "用例名称",
width : 60,
dataIndex : 'testcasename'
}, {
id : 'description',
header : "描述",
width : 200,
dataIndex : 'description'
}, {
id : 'status_str',
header : "状态",
width : 100,
dataIndex : 'status_str'
}]
});

var win_task_result = new Ext.Window({
title : "任务执行结果",
closable : true,
width : 650,
height : 550,
plain : true,
resizable : true
});
win_task_result.addListener('close', winclose);

function winclose()
{
clearInterval(taskresult_onerecord_store.autoRefreshProcId);
}
/**取得单条记录的集合**/
var taskresult_onerecord_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetTaskResult',
method : 'POST'
}),
reader : new Ext.data.JsonReader({
root : "root",
id : 'taskresult_onerecord_store',
totalProperty : 'totalCount'
}, task_result_record)
});
taskresult_onerecord_store.on('beforeload', function() {
Ext.apply(this.baseParams, {
caseid:caseid
});
});


reload_data();
win_task_result.add(taskresult_list_grid);
win_task_result.show();



function reload_data()
{
myparam = {
taskid : taskid,
caseid:caseid,
start : 0,
limit : 1
};
taskresult_onerecord_store.startAutoRefresh(3,myparam,ls_callback,true);
}

function ls_callback()
{
var rec = taskresult_onerecord_store.getAt(0);
if (rec != null)
taskresult_list_grid_store.add(rec);
caseid = rec.get('caseid');
//alert(caseid);
}




}
 


本文转自elbertchen 51CTO博客,原文链接:http://blog.51cto.com/linkyou/751904,如需转载请自行联系原作者
上一篇:matlab 工具之各种降维方法工具包,下载及使用教程,有PCA, LDA, 等等。。。


下一篇:SpringBoot 如何进行对象复制