PDA

View Full Version : [INFOREQ] Ext.Layer wrong z-index style after setZIndex



art.home.ext
5 Mar 2010, 3:43 AM
Ext version tested:

Ext 3.1.1


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

FF3.6 (firebug 1.5.2 installed)


Operating System:

WinXP Pro


Description:

Ext.Layer wrong z-index style after setZIndex(this.getZIndex())
in fact, z-index is different when it is set at init() or with setZIndex()


Test Case:



var aLayer = new Ext.Layer({zindex:11000});
aLayer.update('<img src="'+ Ext.BLANK_IMAGE_URL +'"/>');
alert(aLayer.getStyle("z-index"));
aLayer.setZIndex(aLayer.getZIndex());
alert(aLayer.getStyle("z-index"));


Steps to reproduce the problem:

set a z-index value at Layer instanciation
set the same value after instanciation using setZIndex()


The result that was expected:

Ext.Layer has same z-index style


The result that occurs instead:

Ext.Layer has same zindex but different z-index style


Possible fix:

Do not use it if you use shim or shadow
Set shadow and shim to false and override

Ext.override(Ext.Layer, {
setZIndex : function(zindex){
this.zindex = zindex;
//this.setStyle('z-index', zindex + 2);
this.setStyle('z-index', zindex);
/*
if(this.shadow){
this.shadow.setZIndex(zindex + 1);
}
if(this.shim){
this.shim.setStyle('z-index', zindex);
}
*/
return this;

}
});

Jamie Avins
5 Mar 2010, 4:23 PM
I'm not following what you are trying to do...

art.home.ext
6 Mar 2010, 1:45 PM
I'm not following what you are trying to do...
:)) I am trying to report something strange.

But never get understood./:)

In fact I've been stuck with zindex when I tried to reorder a list of layers.

First,
- Create 3 layers [L1,L2,L3] with zindex [z1=11000,z2=11001,z3=11002]
=> style z-index is also [s1=11000,s2=11001,s3=11002]

- Invert layer 1 & 2 using setZIndex
=> gives [z2=11000,z1=11001,z3=11002] but with style z-index [s2=11002,s1=11003,s3=11002]
=> so browser displays L1 above L3
I think the docs warning in setZIndex() should also stand in class @description

Now I know that I must use something like [z1=11000,z2=11003,z3=11006]
even if don't want shadow n/or shim (I must confess I do not understand what is really shim - Anything on it would be appreciated)

But z-index seems to remain inconsistent.
Don't you think that constructor should do :

Ext.Layer = function(config, existingEl){
...
this.zindex = config.zindex || this.getZIndex();
this.position('absolute', this.zindex+2);

if(config.shadow){
this.shadowOffset = config.shadowOffset || 4;
this.shadow = new Ext.Shadow({
offset : this.shadowOffset,
mode : config.shadow,
zIndex:this.zindex
});
}
...
};
or


Ext.Layer = function(config, existingEl){
...
// this.zindex = config.zindex || this.getZIndex();
// this.position('absolute', this.zindex);

if(config.shadow){
this.shadowOffset = config.shadowOffset || 4;
this.shadow = new Ext.Shadow({
offset : this.shadowOffset,
mode : config.shadow
});
}
this.setZIndex(config.zindex || this.getZIndex());
...

};
?
Thanks