Ext.LoadMask showing only in FF

[siggi]

Hello, everyone,

I am using an Ext.LoadMask with Ext JS 4.1.1.

It displays fine in FF (16), but does not show in Chrome and IE.

I am calling the LoadMask using code like this:

var activetab=this.getTopTabbar().getActiveTab();
var aggrid=Ext.ComponentQuery.query('agsuchegrid',activetab)[0];
var myMask = new Ext.LoadMask(aggrid, {
            msg:"Bitte warten, Daten werden geladen"
        });
        myMask.show();

//do stuff and things

myMask.hide();

I am just a beginner developing with ExtJS, so I assume the problem is on my side

What am I doing wrong?

Edit: TheLoadMask also shows in Opera

[Arg0n]

Ext.LoadMask is debrecated =D

Use: component.getEl().mask(); and component.getEl().unmask(); instead

[siggi]

Thanks for your answer.

Unfortunately, your suggestion brought no change. Still showing only in FF and Opera. :<

Is it possible that this happens because of the version I am using (ExtJS 4.1.1 - i.e. the eval version)?

[Arg0n]

I'm using ExtJs 4.1.1a and loading masks are also shown in Chrome... so I dont think it's because of the version.

Could you show some more code? ^^

[siggi]

NO WAI! :P

onTreeSelect : function(view, record, item, index, e, eOpts){
        var data=record.data;
        
        if(data.leaf==true){
            var intId=data.id.replace(/tree_item_/,'')
            var tabbar=this.getTopTabbar();            
            var activetab=tabbar.getActiveTab()
            activetab.getEl().mask('test');          
            
            this.getMessagePanel().update('<p class="details-info">Nachrichten für Modul <b>'+data.text+'</b></p>')
                if(intId=='ag_verwaltung'){
                    this.getController('AgSuche')
                    activetab.setTitle(data.text)
                    activetab.removeAll();
                    activetab.add({
                        border:false,
                        items:[{
                            xtype:'agsuche'
                        }],
                        listeners:{
                            close: function() {
                                this.removeAll(true);
                                Ext.getStore('Agencies').removeAll();
                                if(typeof(Ext.getStore('CRSItems'))!='undefined')
                                    Ext.getStore('CRSItems').removeAll();
                                if(typeof(Ext.getStore('BankData'))!='undefined')
                                    Ext.getStore('BankData').removeAll();
                                if(typeof(Ext.getStore('Employees'))!='undefined')
                                    Ext.getStore('Employees').removeAll();
                                if(typeof(Ext.getStore('Provisions'))!='undefined')
                                    Ext.getStore('Provisions').removeAll();
                            }
                        }
                    
                    }).show();
                }
                else if(intId=='stammdaten_verpflegungsarten'){
                    this.getController('Stammdaten.Verpflegungsarten')
                    activetab.setTitle(data.text)
                    activetab.removeAll();
                    activetab.add({
                        border:false,
                        items:[{
                            xtype:'stammdaten_verpflegungsarten'
                        }]}).show();
                }
                
                else{
                    activetab.removeAll();
                    activetab.setTitle(data.text)
                    activetab.add({
                        closable: true,
                        border:false,
                        title: data.text,
                        html:'<h1>'+data.text+'</h1>'+"<hr>To be implemented"
                    }).show(); 
                }
            
            activetab.doLayout();
            activetab.getEl().unmask();
        }else{
            if(record.isExpanded()){
                this.getModuleTree().collapseNode(record);
            }else{
                this.getModuleTree().expandNode(record);
            }
        }
    },

onTreeSelect is called when a tree item is selected and basically fills the "content area" (=right side) of the active tab (see picture)

screen1.jpg

[Arg0n]

Phew... that's a "unlösbares Rätsel" I would say... I really dunno... you would have to debug ExtJs :x