先上一張效果圖：
效果描述：點擊【開始監測】，能夠選定某行數據，然後通過ajax到後臺單行刷新數據，一行一行逐條刷新。
技術重點：
1、定時器
這裏的參數flag是用來標識到第幾行的，int型。grid是我的表格id
//執行定時器的變量
var runner = new Ext.util.TaskRunner();
var task;
//行標記
var flag = 0;
//開始監聽
function listen(){
task = runner.start({
run:refresh,
interval:1000
});
}//成功之後選擇刷新行
Ext.getCmp('grid').getSelectionModel().select(flag);//停止監聽function stopListen(){runner.stop(task);}
2、單行選定
這裏的參數flag是用來標識到第幾行的，int型。grid是我的表格id
//成功之後選擇刷新行
Ext.getCmp('grid').getSelectionModel().select(flag);3、單行數據修改
這裏看官方文檔有其他方法，但是據我測試都有問題，最後還是老老實實一條條set進去，不過我不是所有數據更新，只是更新幾個值，還可以接受。
var row = Ext.getCmp("grid").getStore().getAt(flag);
var id = row.get("id");
$.ajax({
url:'Im_DitchRegimen_refresh.action?id='+id,
dataType:'json',
success:function(data){
//成功之後選擇刷新行
Ext.getCmp('grid').getSelectionModel().select(flag);
//改變背景顏色,這個方法不太好用
//Ext.getCmp("grid").getView().getNode(flag).style.backgroundColor='#c3daf9';
//裝載最新的數據
row.set("average",data.average);
row.set("max",data.max);
row.set("min",data.min);
row.set("meatime",data.meatime);
row.commit();
//改變flag
var maxColumn = Ext.getCmp("grid").getStore().getCount();
if(flag<maxColumn-1) flag++;
else flag=0;
}
});這裏只貼了我的MVC中的view，代碼不是很規範，因爲我沒有把監聽寫到Controller中。因爲我的項目很小，那種很模塊化的我維護起來太難了。
//定義列
var columns = [{ //列模式
text:'編號',
hidden:true,
dataIndex: 'id',
align:'center'
},{
text: '測站代碼',
width: 160,
dataIndex: 'stcd',
sortable: true, //根據該列排序,默認時間爲true
align:'center'
},{
text: '測量時間',
width:150,
dataIndex: 'meatime',
align:'center',
renderer:Ext.util.Format.dateRenderer('Y-d-m H:i:s') //時間格式化
},{
text: '當前值',
width:120,
dataIndex: 'average',
align:'center'
},{
text: '汛限值',
width:160,
dataIndex: 'max',
align:'center'
},{
text: '最低值',
width:160,
dataIndex: 'min',
align:'center'
},{
text: '總計水位',
width:160,
dataIndex: 'total',
align:'center',
hidden:true
},{
text: '記錄類型',
width:160,
dataIndex: 'meatype',
align:'center',
hidden:true
},{
text: '時間類型',
width:160,
dataIndex: 'timetype',
align:'center',
hidden:true
}];
//定義工具條
var topBar = Ext.create('Ext.toolbar.Toolbar',{
width:500,
items:[{
text:'開始監測',
xtype:'button',
icon:'iframe/images/icon/add.png',
handler:listen
},"-",{
text:'停止監測',
xtype:'button',
icon:'iframe/images/icon/report_edit.png',
handler:stopListen
}]
});
//定義view
Ext.define('Im.view.Im_DitchRegimenView', {
//初始化
innitComponent:function(){
this.callParent(arguments);
},
extend: 'Ext.grid.Panel', //引用控件
title: '實時渠道水情監測', //標題名
frame: true, //面板渲染
fit:'auto',
store:'Im_DitchRegimenStore',
id:"grid",
alias:'widget.DitchRegimen', //定義微件
columnLines:true, //線寬
dockedItems:[{
xtype:'pagingtoolbar',
store:"Im_DitchRegimenStore",
id:"myPagingtoolbar",
displayInfo: true,
displayMsg: '當前顯示記錄: {0} - {1} 共計: {2}',
emptyMsg: "沒有記錄可以顯示",
dock:'bottom'
}],
tbar:topBar, //綁定
selType:'checkboxmodel', //選擇模型的xtype，這裏帶選擇checkbox
multiSelect:true, //多選框
viewConfig:{forceFit:true}, //讓grid的列自動填滿grid的整個寬度，不用一列一列的設定寬度。
autoExpandColumn:'timetype',
columns:columns, //附加列屬性
listeners:{
itemdblclick:function(t,record,item,index,event,eOpts){ //雙擊修改
myForm.getForm().loadRecord(record);
myForm.getForm().url = "Im_DitchRegimen_update.action";
win.show();
}
}
});
//一條一條刷新數據
var refresh = function () {
var row = Ext.getCmp("grid").getStore().getAt(flag);
var id = row.get("id");
$.ajax({
url:'Im_DitchRegimen_refresh.action?id='+id,
dataType:'json',
success:function(data){
//成功之後選擇刷新行
Ext.getCmp('grid').getSelectionModel().select(flag);
//改變背景顏色,這個方法不太好用
//Ext.getCmp("grid").getView().getNode(flag).style.backgroundColor='#c3daf9';
//裝載最新的數據
row.set("average",data.average);
row.set("max",data.max);
row.set("min",data.min);
row.set("meatime",data.meatime);
row.commit();
//改變flag
var maxColumn = Ext.getCmp("grid").getStore().getCount();
if(flag<maxColumn-1) flag++;
else flag=0;
}
});
}
//執行定時器的變量
var runner = new Ext.util.TaskRunner();
var task;
//行標記
var flag = 0;
//開始監聽
function listen(){
task = runner.start({
run:refresh,
interval:1000
});
}
//停止監聽
function stopListen(){
runner.stop(task);
}