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，如需转载请自行联系原作者