仅将 loadMask() 应用于 extjs 中的网格面板不起作用答案

【问题标题】：Applying loadMask() to only grid pannel in extjs is not working仅将 loadMask() 应用于 extjs 中的网格面板不起作用
【发布时间】：2015-01-01 08:37:49
【问题描述】：

我想使用它的 id 仅将负载掩码应用于我的网格面板， var myMask = new Ext.LoadMask({msg:"请稍候...",target:Ext.ComponentQuery.query('#grid')[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();
      }

【问题讨论】：

标签： extjs ria

【解决方案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

【讨论】：