PDA

View Full Version : [Fixed] Layout Problem->Nested border layouts: IE8



zhegwood
22 Sep 2009, 11:52 AM
This code works in FF 3.0.14, Safari 3.2.1, and Opera 9.63, but not IE 8 (all on Windows Vista). I'm getting an "Invalid Argument.." error. Any ideas?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Zach's Playground</title>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="ext-3.0.0/resources/css/ext-all.css"type="text/css" />
<style type="text/css">

body
{
width:100%;
height:100%;
padding:0px;
margin:0px;
background-color:#1E6CC7;
}
.x-panel-body {
background-color:Transparent;
width:auto !important;
}
.main-panel-container {
width:970px !important;
margin:auto !important;
background-color:transparent;
}
.main-panel-container-center {
width:960px !important;
background-color:#fff;
}
</style>
</head>
<body></body>
</html>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.namespace("AV");
AV.Main = {
init: function(){
var panel = new Ext.Panel({
id: "AV.Main.Container",
cls: "main-panel-container",
layout: "border",
border: false,
items: [
{
region: "north",
border: false,
height: 10
},
{
region: "center",
layout: "border",
cls: "main-panel-container-center",
border: false,
floating: true,
shadow: true,
shadowOffset: 7,
items: [
{
region: "north",
height: 100,
html: "north"
},
{
region: "center",
height: 100,
html: "center"
}
]
},
{
region: "south",
height: 50,
border: false,
html: "south"
}
]
});
return panel;
}
}

AV.ViewPort = new Ext.Viewport({
layout: "fit",
items: AV.Main.init()
});
});
</script>

Animal
22 Sep 2009, 11:56 AM
Remove that outer Panel and make the Viewport layout: 'border'

You can't use floating: true as a child of a layout which is supposed to do positioning.

zhegwood
22 Sep 2009, 12:07 PM
Remove that outer Panel and make the Viewport layout: 'border'

You can't use floating: true as a child of a layout which is supposed to do positioning.

I'm not sure this will solve my problem... I need to have a center-aligned site with a shadow on the on the content area only and in order to have a shadow on a panel, it must be set to floating:true. If you save the code I posted above into an html file and load it into FF you'll see the layout I need. It seems strange that it works in all browsers I'm using except IE8.

Could you suggest a better way to do this?

Animal
22 Sep 2009, 1:04 PM
JUst create a shadow

http://www.extjs.com/deploy/dev/docs/?class=Ext.Shadow

zhegwood
22 Sep 2009, 1:57 PM
Did that with similar results... Doesn't work in IE. I am getting a different error though. Invalid arg line 5327 in ext-all-debug. There's a for loop there and it's probably breaking because the value for z-index is "NaN" and it's blowing up on the assignment:

this.dom.style[chkCache(style)] = value;

It looks like the z-index for the Shadow is getting set to NaN on line 15901:
this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);

In IE, this.zIndex is undefined and the parsInt call returns NaN because z-index is 'auto' at this point.

Here's the new code that's doing the shadow after the fact... If there's something wrong here, let me know.



AV.Main = {
init: function(){
var panel = new Ext.Panel({
id: "AV.Main.Container",
cls: "main-panel-container",
layout: "border",
border: false,
items: [
{
region: "north",
border: false,
height: 10
},
{
region: "center",
layout: "border",
cls: "main-panel-container-center",
border: false,
items: [
{
region: "north",
height: 100,
html: "north"
},
{
region: "center",
html: "center"
}
],
listeners: {
afterlayout: {
fn: function (obj,layout) {
var shadow = new Ext.Shadow({
mode: 'drop',
offset: 7
});
shadow.show(obj.el.dom);
},
scope: this
}
}
},
{
region: "south",
height: 50,
border: false,
html: "south"
}
]
});
return panel;
}
}

Animal
22 Sep 2009, 11:25 PM
OK, you wore me down. I will do you job for you.

Drop this into examples/<anywhere>



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript">
Ext.ns("AV");
AV.Main = {
init: function(){
var mainContainer = new Ext.Viewport({
id: "AV.Main.Container",
cls: "main-panel-container",
layout: "border",
items: [{
region: "north",
border: false,
height: 10
}, {
xtype: 'container',
region: "center",
layout: "border",
margins: '7 7 7 7',
cls: "main-panel-container-center",
items: [{
region: "north",
height: 100,
html: "inner-north"
}, {
region: "center",
html: "inner-center"
}],
listeners: {
afterlayout: {
fn: function (obj,layout) {
var shadow = new Ext.Shadow({
mode: 'drop',
offset: 7
});
shadow.show(obj.el.dom);
},
scope: this
}
}
}, {
region: "south",
height: 50,
border: false,
html: "south"
}]
});
return mainContainer;
}
};
Ext.onReady(AV.Main.init);
</script>
</head>
<body>
</body>
</html>


And learn from the corrected code, and the corrected indentation.

zhegwood
23 Sep 2009, 8:26 AM
This fixes it:

set this style:


.x-ie-shadow {
background-color:#000;
}


And overrides for Ext.Shadow.prototype are in bold.


Ext.Shadow.prototype = {
/**
* @cfg {String} mode
* The shadow display mode. Supports the following options:<div class="mdetail-params"><ul>
* <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
* <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
* <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
* </ul></div>
*/
/**
* @cfg {String} offset
* The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
*/
offset: 4,

// private
defaultMode: "drop",

/**
* Displays the shadow under the target element
* @param {Mixed} targetEl The id or element under which the shadow should display
*/
show: function(target) {
target=Ext.get(target);
if(!this.el) {
this.el=Ext.Shadow.Pool.pull();
if(this.el.dom.nextSibling!=target.dom) {
this.el.insertBefore(target);
}
}


var z = this.zIndex || parseInt(target.getStyle("z-index"),10)-1;
!isNaN(z) ? this.el.setStyle("z-index",z) : this.el.setStyle("z-index",0);


if(Ext.isIE) {
this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
}
this.realign(
target.getLeft(true),
target.getTop(true),
target.getWidth(),
target.getHeight()
);
this.el.dom.style.display="block";
},

/**
* Returns true if the shadow is visible, else false
*/
isVisible: function() {
return this.el?true:false;
},

/**
* Direct alignment when values are already available. Show must be called at least once before
* calling this method to ensure it is initialized.
* @param {Number} left The target element left position
* @param {Number} top The target element top position
* @param {Number} width The target element width
* @param {Number} height The target element height
*/
realign: function(l,t,w,h) {
if(!this.el) {
return;
}
var a=this.adjusts,d=this.el.dom,s=d.style;
var iea=0;
s.left=(l+a.l)+"px";
s.top=(t+a.t)+"px";
var sw=(w+a.w);
var sh=(h+a.h);


if (sw < 0) { sw = 0; }
if (sh < 0) { sh = 0; }


var sws=sw+"px"
var shs=sh+"px";
if(s.width!=sws||s.height!=shs) {
s.width=sws;
s.height=shs;
if(!Ext.isIE) {
var cn=d.childNodes;
var sww=Math.max(0,(sw-12))+"px";
cn[0].childNodes[1].style.width=sww;
cn[1].childNodes[1].style.width=sww;
cn[2].childNodes[1].style.width=sww;
cn[1].style.height=Math.max(0,(sh-12))+"px";
}
}
},

/**
* Hides this shadow
*/
hide: function() {
if(this.el) {
this.el.dom.style.display="none";
Ext.Shadow.Pool.push(this.el);
delete this.el;
}
},

/**
* Adjust the z-index of this shadow
* @param {Number} zindex The new z-index
*/
setZIndex: function(z) {
this.zIndex=z;
if(this.el) {
this.el.setStyle("z-index",z);
}
}
};

pholcomb
11 Mar 2010, 1:04 PM
Much thanks zhegwood. This saved me a lot of time. Great investigative work man.