Применение loadMask() только к сетке сетки в extjs не работает

Question

Я хочу применить маску загрузки только к моей панели сетки, используя ее id, var myMask = new Ext.LoadMask ({msg: "Please wait ... », цель: Ext.ComponentQuery.query ('# сетки') [0]}); myMask.show(); Но это, похоже, не работает. Этот же код работает для панели вкладок. Пожалуйста, представьте необходимые изменения, чтобы получить маску нагрузки только для сетки.

//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», потому что это псевдоним компонент). Тогда просто исправить, заменить Itemid на правильное имя, , но лучше для этого с помощью необходимого компонента для целевого

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

лучше

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