extjs : 마스크 마스크 그리드

Question

나는 extjs 그리드를 사용하고 있으며, 매 20 초마다 RenderGrid 함수를 호출하는 jQuery 타이머가 있습니다. 타이머 틱마다 눈금 표시를하고 싶습니다. 제발 조언.

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 사람이 나와 함께 잘 작동 approch하지만 지금 내 브라우저는, 그리드 객체가 무한 루프에 입력 한 것 같다 당신이 할 수있는 경우이 내 모든 스크립트 코드는, 타이머 나에게 예를 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 초마다 변화하는 것은 네 dada, 상점, 칼럼 모델, 그리드는 결코 변하지 않는다. 타이머 핸들러에서 간단하게 loadData(Object data, [Boolean append])을 수행 할 수 있습니까? API 여기에