    /**
     * A simple class used to mask any {@link Ext.Container}.
     *
     * This should rarely be used directly, instead look at the {@link Ext.Container#masked} configuration.
     *
     * ## Example
     *
     *     // Create our container
     *     var container = Ext.create('Ext.Container', {
     *         html: 'My container!'
     *     });
     *
     *     // Add the container to the Viewport
     *     Ext.Viewport.add(container);
     *
     *     // Mask the container
     *     container.setMasked(true;)
     */
    Ext.define('Ext.Mask', {
        extend: 'Ext.Component',
        xtype: 'mask',

        config: {
            // @inherit
            baseCls: Ext.baseCSSPrefix + 'mask',

            /**
             * @cfg {Boolean} transparent True to make this mask transparent.
             */
            transparent: false,

            /**
             * @hide
             */
            top: 0,

            /**
             * @hide
             */
            left: 0,

            /**
             * @hide
             */
            right: 0,

            /**
             * @hide
             */
            bottom: 0
        },

        /**
         * @event tap
         * A tap event fired when a user taps on this mask
         * @param {Ext.Mask} this The mask instance
         * @param {Ext.EventObject} e The event object
         */
        initialize: function() {
            this.callParent();

            this.on({
                painted: 'onPainted',
                erased: 'onErased'
            })
        },

        onPainted: function() {
            this.element.on('*', 'onEvent', this);
        },

        onErased: function() {
            this.element.un('*', 'onEvent', this);
        },

        onEvent: function(e) {
            var controller = arguments[arguments.length - 1];

            if (controller.info.eventName === 'tap') {
                this.fireEvent('tap', this, e);
                return false;
            }

            if (e && e.stopEvent) {
                e.stopEvent();
            }

            return false;
        },

        updateTransparent: function(newTransparent) {
            this[newTransparent ? 'addCls' : 'removeCls'](this.getBaseCls() + '-transparent');
        }
    });