PDA

View Full Version : Ext.LoadMask showing only in FF



siggi
5 Dec 2012, 1:03 AM
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
5 Dec 2012, 3:10 AM
Ext.LoadMask is debrecated =D

Use: component.getEl().mask() (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-mask); and component.getEl().unmask() (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-unmask); instead

siggi
5 Dec 2012, 3:49 AM
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
5 Dec 2012, 4:04 AM
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
5 Dec 2012, 4:14 AM
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)

40589

Arg0n
5 Dec 2012, 4:53 AM
Phew... that's a "unlösbares Rätsel" I would say... I really dunno... you would have to debug ExtJs :x