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