Extjs Mask Tab

by elganz

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...');
    }
});