Results 1 to 8 of 8

Thread: [Fixed] Layout Problem->Nested border layouts: IE8

  1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default [Fixed] Layout Problem->Nested border layouts: IE8

    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?

    Code:
    <!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>

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    Quote Originally Posted by Animal View Post
    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?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

  5. #5
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    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.

    Code:
    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;
    	}
    }

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, you wore me down. I will do you job for you.

    Drop this into examples/<anywhere>

    Code:
    <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.

  7. #7
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    This fixes it:

    set this style:
    Code:
    .x-ie-shadow {
    	background-color:#000;
    }
    And overrides for Ext.Shadow.prototype are in bold.
    Code:
    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);
    		}
    	}
    };

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Posts
    10

    Default

    Much thanks zhegwood. This saved me a lot of time. Great investigative work man.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •