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);
}




}