存储加载时，extjs 在面板上显示加载掩码答案

【问题标题】：extjs displaying loadmask on panel when store loads存储加载时，extjs 在面板上显示加载掩码
【发布时间】：2013-07-04 05:18:55
【问题描述】：

我在面板中添加了一个加载掩码，我希望每次加载与加载掩码关联的存储时都显示微调器。该面板是一个大型工具提示，每次访问折线图中的一个点时都会加载商店。因此，当我将鼠标悬停在一个点上时，我希望在看到面板中的内容之前会出现一条加载消息。然而，我得到的是一个空面板。如果我删除添加加载掩码（initComponent 函数）的代码，它可以工作（虽然没有加载消息）。我将如何以这种方式使用加载掩码，而不是为每个面板显式调用 setLoading() 方法？

代码如下：

tips:
{
  ...
  items:{
    xtype: 'panel',
    initComponent: function(){
      var loadMask = new Ext.LoadMask(this, {
        store: Ext.getStore('CompanyContext')
      });
    },
    id: 'bar-tip-panel',
    width: 700,
    height: 700,
    layout: {
      type: 'accordion',
      align : 'stretch',
      padding: '5 5 5 5'
    },
    items:... 
  }
}

【问题讨论】：

标签： javascript extjs

【解决方案1】：

config 对象不是覆盖initComponent 方法的合适位置。你应该做的是定义Panel的子类，并覆盖那里的方法。

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mypanel',

    initComponent: function() {
        this.callParent(arguments); // MUST call parent's method

        var loadMask = new Ext.LoadMask(this, {
            store: ...
        });
    },
});

然后，您可以在 tips 配置中使用 xtype mypanel。

【讨论】：