Question

我想使用id来将加载掩码仅应用于我的网格面板， var myMask = new Ext.LoadMask（{msg：＆＃34; Please wait ...＆＃34;，target：Ext.ComponentQuery.query（＆＃39; #grid＆＃39;）[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是＆＃34; batchGrid＆＃34;（通过＆＃34;＃batchGrid＆＃34;查找），你的网格面板别名是＆＃34; genericgrid＆＃34; （通过＆＃34; genericgrid＆＃34;找到它，因为它是组件的别名）。然后纠正它，用正确的名称替换你的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

将loadMask（）仅应用于extjs中的网格面板不起作用

1 个答案: