Extjs Mask Tab

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.define('MyTab', {
  extend: 'Ext.Panel',
  //    layout: 'fit',
  //    bodyPadding: 10,
  title: 'container',
  listeners: {
    //afterlayout: function(){this.el.mask('masking....')}
    boxready: function() {
      this.el.mask('masking....')
    }
  }
  //items:[{xtype: 'panel', title:'panel', height:300}]
});

Ext.application({
  name: 'MyApp',
  launch: function() {
    var MyTab = Ext.create('MyTab');

    var test = Ext.create('Ext.tab.Panel', {
      activeTab: 0,
      title: 'Tab Panel',
      items: [{
          title: 'panel1',
          bodyPadding: 10,
          html: 'A simple tab'
        },
        MyTab
      ]
    });

    var view = Ext.create('Ext.Viewport', {
      layout: 'fit',
      //            layout: {type:'fit', align: 'stretchall'},
      items: [test],
      //renderTo: Ext.getBody()
    });

    MyTab.el.mask('mask...');
  }
});