Extjs定时操作
查看api可知：
// 启动一个简单的时钟任务，每秒执行一次更新一个
div var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000 //1秒}
Ext.TaskManager.start(task);
1，Extjs如何隔一段时间操作一次
可以看出task是一个 var，通过设置interval隔一段时间操作一次
2，实现的功能效果图：
view层代码：
8 Ext.define('ExtApp.view.StudentMonitor' , {
9 extend : 'Ext.grid.Panel' ,
10 id : 'StudentMonitorGrid' ,
11 xtype : 'StudentMonitor' ,
12 store : 'StudentMonitor' ,
13 draggable:false, //设置为false则禁用拖拽改变列顺序、
14 columnLines:true,//添加列的框线样式
15 viewConfig: {
16 stripeRows:true //True来实现隔行换颜色
17 },
18 tbar : [{
19 xtype : 'form',
20 width : '100%',
21 id : 'FormMonitor',
22 items : [{
23 xtype : 'container',
24 padding : 5,
25 flex : 2,
26 layout : {
27 type : 'hbox'
28 },
29 items : [{
30 xtype : 'button',
31 id : 'btnOnMonitor',
32 text : '打开学生监控'
33 },{
34 xtype : 'button',
35 id : 'btnOffMonitor',
36 text : '关闭学生监控'
37 },{
38 padding:5,
39 xtype:'container',
40 flex:1,
41 anchor:'100%',
42 layout:{
43 type:'hbox',
44 pack:'end'
45 },
46 items:[{
47 xtype:'button',
48 id:'btnEmptyMonitor',
49 text:'全部清空'
50 }]
51 }]
52 }]
53 }],
54 columns : [
55 //{xtype:'rownumberer',text:'序号',flex:1, align:'center'},
56 {text:'账户ID' , flex:1 , align:'center' , dataIndex:'userCode'},
57 {text:'用户姓名' , flex:1 , align:'center' , dataIndex:'userName'},
58 {text:'年级' , flex:1 , align:'center' , dataIndex:'gradeName'},
59 {text:'时间' , flex:2 , align:'center' , dataIndex:'time' },
60 {header: "测试记录", align:"center",flex:2,
61 renderer:function(value){
62 return '<font size="3" color="red">该同学已经5分钟没有操作屏幕</font>';
63 }
64 },
65 {xtype: 'actioncolumn' , //这里是放按钮的地方
66 header: '操作' ,
67 width: 50 ,
68 flex : 1 ,
69 align:'center',
70 items: [{
71 icon : 'images/user_delete.png' , //删除图标
72 tooltip : '删除账户' ,
73 handler : function(grid, rowIndex, colIndex){
74 console.log(rowIndex);
75 var store = grid.getStore();
76 console.log(store.getAt(rowIndex));
77 store.removeAt(rowIndex);
78 grid.updateLayout();
79 }
80 }]
81 }],
82 dockedItems:[{
83 xtype: 'pagingtoolbar',
84 store : 'StudentMonitor' , // GridPanel中使用的数据
85 dock: 'bottom',
86 displayInfo: true
87 }]
88
89 });
controller层代码：
1 onMonitor:function(btn,event){ 2 var grid=Ext.getCmp('StudentMonitorGrid'); 3 var store=this.getStore('StudentMonitor'); 4 var pageBar = grid.down('pagingtoolbar'); 5 pageBar.moveFirst(); 6 task={ 7 run:function(){ 8 Ext.Ajax.request({ 9 url: 'getMessages.action', 10 callback:function(options,success,response){ 11 console.log(response); 12 console.log(response.responseText); 13 console.log(Ext.decode(response.responseText)); 14 console.log(Ext.decode(response.responseText).rows); 15 var data = Ext.decode(response.responseText).rows; 16 for(var i in data){ 17 console.log(data[i]); 18 store.add({ 19 userCode:data[i].userCode, 20 userName:data[i].userName, 21 time:data[i].time, 22 gradeName:data[i].gradeName 23 }) 24 } 25 } 26 }) 27 }, 28 interval:1000 29 }; 30 Ext.TaskManager.start(task); 31 } ,
32 var task;
3，如何删除store为本地grid的一行？
通过grid带的函数handler可以找到rowIndex，通过Store.removeAt(rowIndex);
Store操作返回后台时候：
通过Ext.Ajax.request执行即可
4，Extjs中decode使用
通过把response打印出来，可以看出我们需要的是responseText,由于返回的是一个Jason格式字符串
我们需要使用decode，可以看api:decode( String json, Boolean safe ) : Object，,传入是一个Jason,出来是个object
通过打印 console.log(Ext.decode(response.responseText)); 我们发现，返回了"rows"和"results"，我们取得rows，返回的是是一个数组，通过 for(var i in data)取到数组里面的值
为啥不decode就不行？
只有返回的是Object才可以通过 .取值
例如：
5，extjs怎样在gird中添加一行？
store.add()
参考资料：http://blog.csdn.net/itlwc/article/details/7868626
var record = store.getAt(index);
store.add(
new MyRecord({
name : 'lwc',
age : 18
})
);
