title: extjs: load mask grid
body: <p>I am using extjs grid, and I have a jQuery timer, which will call <code>RenderGrid</code> function every 20 seconds. I want to show mask for grid each timer tick. Please advise.</p>
  
  <pre><code>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;
  
      }
  </code></pre>
  
  <hr>
  
  <p>thaks man this approch working fine with me but now my browser is hanging it seems, grid object will enter in infinite loop this all my script code, please prvide me example with timer if you can :  </p>
  
  <pre><code>    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 "&lt;img class=Blink src='" + val + "'&gt;";
          }
      }
      function renderCheckBox(val, cell, record) {
          var x = '&lt;input onclick="alert(' + cell.id + ')" type="checkbox" name="mycheckbox" /&gt;';
          //var x = '&lt;input type="checkbox" name="mycheckbox" /&gt;';
          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();
  
      });
  </code></pre>