Ext.dom.Element.mask(msg, msgCls) maybe have a bug

[perry_jia]

I created a Panel contains a toolbar and a component, i just want to mask the "component" after initialized, however it mask the whole Panel and I could not tap the back button on the toolbar because of the mask.


QQ截图20111121113655.png

Ext.setup({
    onReady : function() {
        var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            items: [{
                    xtype : 'toolbar',
                    docked: 'top',
                    items : [{
                        text : 'Back',
                        ui : 'back'
                    }]
                }, {
                    xtype: 'container',
                    items: [{
                        xtype: 'textfield'
                    }, {
                        xtype: 'textfield'
                    }]
                }
           ],
               
           initialize: function() {
                 var a2 = this.items.get(1);
                 a2.mask('Loading...', 'x-loading-spinner', true);
           }
        });
    }
});

[mitchellsimoens]

Don't override methods like that. I would listen for an event and mask the component.

[perry_jia]

Listen for an event?
Did you mean "initialize" method should not be overrided?
But which event should i listen for? The "afterrender" is deprecated.

Can you show me the code?
Thank you very much.

[perry_jia]

It must be a bug.

.x-mask {

• position: absolute;
• top: 0;
• left: 0;
• bottom: 0;
• right: 0;
• height: 100%;
• z-index: 10;
• display: -webkit-box;
• display: box;
• -webkit-box-align: center;
• box-align: center;
• -webkit-box-pack: center;
• box-pack: center;
• background: rgba(0, 0, 0, 0.3) center center no-repeat;

}

so the whole panel is masked.

[alnino]

Hi,
I don't know if you can use this method panel.setMask({xtype:'loadmask', message: 'Please Wait', indicator: true});
or panel.setMasked({xtype:'loadmask', message: 'Please Wait', indicator: true});