extjs의 그리드 패널에만 loadMask()를 적용하지 않습니다.

Question

ID를 사용하여 그리드 패널에로드 마스크를 적용하려면 var myMask = new Ext.LoadMask ({msg : "Please wait ... ", target : Ext.ComponentQuery.query ('# grid') [0]}); myMask.show(); 하지만이 코드는 작동하지 않습니다. 같은 코드가 탭 패널에서 작동합니다. Grid Pannel에 대해서만 load mask를 얻기 위해 필요한 변경을 제안하십시오. 이것

//View code 

Ext.define("DummyApp.view.grid.GenericGrid",{ 
    extend: "Ext.panel.Panel", 
    requires: ['DummyApp.view.toolBar','DummyApp.view.formPanel','Ext.state.*','Ext.data.*'], 
    controller: "genericGrid", 
    alias:"widget.genericgrid", 
    initComponent: function(){ 
     Ext.apply(this, { 
      items: [this.createToolbar(),this.createGrid()] 
     }); 
     this.callParent(arguments);   
    }, 
    createToolbar: function(){ 
     this.toolbar = Ext.create('DummyApp.view.toolBar'); 
     return this.toolbar; 
    }, 
    createGrid: function(){ 
     this.grid = Ext.create('Ext.grid.Panel',{ 
      itemId: 'batchGrid', 
      columnLines : true, 
      selType: 'cellmodel', 
      autoScroll :true, 
      maxHeight:535, 
      stateId: 'GridPanel', 
      loadMask: true, 
      stateful: true, 
      bind:{ 
       store:'{genericGrid}' 
      }  
     }); 
     return this.grid; 
    } 


//Controller code 
renderData: function(genericGrid) { 
      var store = Ext.create("DummyApp.store.GenericGrid"), 
       gridId = genericGrid.up().gridId, 
       serviceInput = Util.createServiceResponse(gridId); 
       var myMask = new Ext.LoadMask({msg:"Please wait...",target: Ext.ComponentQuery.query('#grid')[0]}); 
       myMask.show(); 
      Ext.Ajax.request({ 
       url: Util.localGridService, 
       method: 'POST', 
       headers: Util.createRequestHeaders(), 
       jsonData: { 
        getConfigurationAndDataRequestType: serviceInput 
       }, 
       success: function(conn, response, options, eOpts) { 
        myMask.hide(); 
        var data = Util.decodeJSON(conn.responseText); 
        store.setData(Util.formatGridData(data)); 
        genericGrid.reconfigure(store, Util.formatGridMetaData(data)); 
       }, 
       failure: function(conn, response, options, eOpts) { 
       myMask.hide(); 
        Util.showErrorMsg(conn.responseText); 
       }, 
       scope: this 
      }); 
      store.load(); 
     } 

Answer 1

봐, 코드 그리드에 해당 itemId는 ("#batchGrid"으로 찾기) "batchGrid"입니다 가지고, 그리드 패널은 별명이의 별칭이기 때문 "genericgrid"("genericgrid"에서 찾을 수있다이 구성 요소). 그럼 그냥

var myMask = new Ext.LoadMask({msg:"Please wait...",target: Ext.ComponentQuery.query('#batchGrid')[0]}); 

더 나은 목표를 위해, 올바른 이름을 사용하여이 필요한 구성 요소에 대한 하지만 더 나은 귀하의 해당 itemId를 교체하여 수정

renderData: function(genericGrid) { 
    var store = Ext.create("DummyApp.store.GenericGrid"), 
     grid = genericGrid.down('#batchGrid') // get grid 
     ... 

    var myMask = new Ext.LoadMask({msg:"Please wait...", target: grid /*or genericGrid for gridpanel*/ }); 

Fiddle