extjs：加載蒙板網格

Question

我正在使用extjs網格，並且我有一個jQuery計時器，它將每20秒調用一次RenderGrid函數。我想爲每個計時器滴答聲顯示網格掩碼。請指教。

function RenderGrid(dataObj) { 

     var jasonContent = JSON.parse(dataObj) 

     if (document.getElementById('panel').innerHTML != '') { 
      document.getElementById('panel').innerHTML = ''; 
     } 
     var myData = { 
      records: jasonContent 
     }; 

     var fields = [ 
    { name: 'Position_ID', mapping: 'Position_ID' }, 
    { name: 'PriorityCount', mapping: 'PriorityCount' }, 
    { name: 'MyCheckBox', mapping: 'MyCheckBox' }, 
    { name: 'Veh_Plateno', mapping: 'Veh_Plateno' }, 
    { name: 'Drv_Firstname', mapping: 'Drv_Firstname' }, 
    { name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' }, 
    { name: 'Speed', mapping: 'Speed' }, 
    { name: 'SubFleet_Name', mapping: 'SubFleet_Name' } 

]; 

     var gridStore = new Ext.data.JsonStore({ 
      fields: fields, 
      data: myData, 
      root: 'records' 

     }); 


     var cols = [ 

    { id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false }, 
    { header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true }, 
    { header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true }, 
    { header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' }, 
    { header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' }, 
    { header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' }, 
    { header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' }, 
    { header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' } 

]; 

     gridStore.setDefaultSort('Veh_Plateno', 'asc'); 

     var grid = new Ext.grid.GridPanel({ 
      ddGroup: 'gridDDGroup', 
      store: gridStore, 
      renderTo: 'panel', 
      columns: cols, 
      enableDragDrop: true, 
      stripeRows: true, 
      pageSize:25, 
      header: false, 
      loadMask: true, 
      autoExpandColumn: 'Position_ID', 
      width: 900, 
      height: 325, 
      region: 'west', 
      title: 'Data Grid', 
      selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }), 
      listeners: { 
       'rowdblclick': function (grid, rowIndex, e) { 
        var rec = grid.getStore().getAt(rowIndex); 
        var columnName = grid.getColumnModel().getDataIndex(2); 
        Ext.MessageBox.alert('', rec.get(columnName)); 

        // do something 
       } 

      } 
     }); 

     //grid.getEl().mask(); 
     //grid.store.reload(); 
     //grid.getEl().unmask(); 

     //gridStore.load({ params: { start:0, limit: 25} }); 
     /// grid.loadMask.show(); 


     grid = null; 
     cols = null; 
     fields = null; 
     gridStore = null; 
     myData = null; 

    } 

---

thaks人本計算策略工作的罰款與我，但現在我的瀏覽器是掛看來，網格對象將在無限循環進入這個我所有的腳本代碼，請如果你能prvide我例如用定時器：

var grid = null; 
    function RenderPositionsGrid(dataObj) { 


     var jasonContent = JSON.parse(dataObj) 



     var myData = { 
      records: jasonContent 
     }; 
     if (grid == null) { 


      var fields = [ 
    { name: 'Position_ID', mapping: 'Position_ID' }, 
    { name: 'PriorityCount', mapping: 'PriorityCount' }, 
    { name: 'MyCheckBox', mapping: 'MyCheckBox' }, 
    { name: 'Veh_Plateno', mapping: 'Veh_Plateno' }, 
    { name: 'Drv_Firstname', mapping: 'Drv_Firstname' }, 
    { name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' }, 
    { name: 'Speed', mapping: 'Speed' }, 
    { name: 'SubFleet_Name', mapping: 'SubFleet_Name' } 

]; 

      var gridStore = new Ext.data.JsonStore({ 
       fields: fields, 
       data: myData, 
       root: 'records' 

      }); 


      var cols = [ 

    { id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false }, 
    { header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true }, 
    { header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true }, 
    { header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' }, 
    { header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' }, 
    { header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' }, 
    { header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' }, 
    { header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' } 

]; 

      gridStore.setDefaultSort('Veh_Plateno', 'asc'); 

      grid = new Ext.grid.GridPanel({ 
       ddGroup: 'gridDDGroup', 
       store: gridStore, 
       renderTo: 'panel', 
       columns: cols, 
       enableDragDrop: true, 
       stripeRows: true, 
       pageSize: 25, 
       header: false, 
       loadMask: true, 
       autoExpandColumn: 'Position_ID', 
       width: 900, 
       height: 325, 
       region: 'west', 
       title: 'Data Grid', 
       selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }), 
       listeners: { 
        'rowdblclick': function (grid, rowIndex, e) { 
         var rec = grid.getStore().getAt(rowIndex); 
         var columnName = grid.getColumnModel().getDataIndex(2); 
         Ext.MessageBox.alert('', rec.get(columnName)); 

         // do something 
        } 

       } 
      }); 

     } 
     else { 
      grid.store.loadData(myData); 
     } 

    } 
    function renderIcon(val) { 
     if (val) { 

      val = '../images/grid/icon_warning.png'; 
      return "<img class=Blink src='" + val + "'>"; 
     } 
    } 
    function renderCheckBox(val, cell, record) { 
     var x = '<input onclick="alert(' + cell.id + ')" type="checkbox" name="mycheckbox" />'; 
     //var x = '<input type="checkbox" name="mycheckbox" />'; 
     return x; 

    } 
    function renderDate(date) { 
     alert(date); 

     return date.format("d.m.Y"); 
    } 

    function BindGridView() { 

     Data.GetVehiclePositions(onSuccess, onFail, null); 

    } 
    function onSuccess(result) { 

     RenderPositionsGrid(result); 

     var timeout = 4000; var timer; 
     timer = $.timer(timeout, function() { BindGridView(result); }); 
    } 
    function onFail(result) { 
     alert("fail"); 
    } 
    function blink() { 

     $('.Blink').delay(100).fadeTo(200, 0.5).delay(200).fadeTo(100, 1, blink); 
    } 

    Ext.onReady(function() { 

     BindGridView(); 
     blink(); 

    }); 

Answer 1

你可以使用

var myMask = new Ext.LoadMask(grid.getEl(), {msg:"Please wait..."}); 
myMask.show(); 

不過，我覺得你的方法很怪，好像鄰每20秒改變一次的東西就是你的達達，你的商店，專欄模型，網格從未改變過。 你能在你的定時器處理程序中做一個簡單的loadData(Object data, [Boolean append])嗎？ API在這裏