• 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           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: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  

        })  

    );  

     

  • 相关阅读:
    angular2
    angular1
    JavaScript随笔1
    鼠标样式
    清除浮动
    css-父标签中的子标签默认位置
    [Leetcode] Decode Ways
    [Java] 利用LinkedHashMap来实现LRU Cache
    LinkedHashMap和HashMap的比较使用(转)
    [Java] java.util.Arrays 中使用的 sort 采用的算法 (转)
  • 原文地址:https://www.cnblogs.com/shipskunkun/p/4551150.html
Copyright © 2020-2023  润新知