[CLOSED] Layout run failed IE7/IE8

  1. #1

    [CLOSED] Layout run failed IE7/IE8

    I had some time to look at this again. This is related to the thread Image Caption: Film Layer and Image Caption: Film Layer.

    The error only prints in the IE Console Log when the attribute ScriptMode is set to Development. If set to Release or Debug no error is reported but the tooltip area does blink.

    I assume the [E] Layout run failed is causing the blinking. Any thoughts.

    <ext:ResourceManager runat="server" ClientIDMode="Static" ScriptMode="Development" />
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script runat="server">
        public class MyImage
        {
            public string Filename { get; set; }
            public string Title { get; set; }
            public string Credit { get; set; }
            public string Caption { get; set; }
            public DateTime DateAdded { get; set; }
            public Boolean Active { get; set; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            List<MyImage> images = GetImages();
            int imageIndex = 0;
    
            foreach (MyImage myImage in images)
            {
                imageIndex++;
                String imageUrl = String.Format("images/{0}", myImage.Filename);
                String id = String.Format("Image{0}", imageIndex);
    
                Ext.Net.Image img = new Ext.Net.Image
                {
                    ID = id,
                    ImageUrl = imageUrl,
                    Tag = imageIndex,
                    Width = 480
                };
    
                String lId = String.Format("Layer{0}", imageIndex);
                Container ctnr = new Container
                {
                    ID = lId,
                    // Add background-color: red; opacity: 0.2; filter:Alpha(opacity=20); to style below to see the filmLayer.
                    // IE9 and belows require the background-color and filter:Alpha(opacity=0) to show a tooltip or it could be a z-index issue.
                    StyleSpec = "position: absolute; z-index: 20000; background-color: red; opacity: 0.0; filter:Alpha(opacity=0);",
                    CustomConfig = { new ConfigItem { Name = "layerTargetID", Value = id, Mode = ParameterMode.Value } },
                    Listeners = { AfterLayout = { Fn = "ApplyPanel" } }
                };
                if (imageIndex > 1) ctnr.Hidden = true;
    
                string caption = String.Format("<span style='float: right'><i>{1}</i></span><b>{0}</b><hr/>{2}", myImage.Title, myImage.Credit, myImage.Caption);
                String tId = String.Format("ToolTip{0}", imageIndex);
                ToolTip tt = new ToolTip
                {
                    ID = tId,
                    MaxWidth = 479,
                    Width = 479,
                    DismissDelay = 0,
                    Html = caption,
                    BaseCls = "imageTooltip",
                    BodyCls = "imageTooltipBody",
                    CustomConfig = { new ConfigItem { Name = "getTargetXY", Value = "getConstrainedTipXY", Mode = ParameterMode.Raw },
                                         new ConfigItem { Name = "onDocMouseDown", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }}
                };
                ctnr.ToolTips.Add(tt);
    
                ImageCarousel.Items.Add(img);
                ImageCarousel.ContentControls.Add(ctnr);
            };
        }
    
        private List<MyImage> GetImages()
        {
            List<MyImage> data = new List<MyImage>();
    
            data.Add(new MyImage { Filename = "car03.jpg", Title = "BLUE COLD", Credit = "2010 Ford Mustang At SEMA 2009", Caption = "Blah", DateAdded = DateTime.Parse("2015-01-01"), Active = true });
            data.Add(new MyImage { Filename = "car01.jpg", Title = "RED HOT", Credit = "Photo taken from niceartpaperz.com", Caption = "Blah", DateAdded = DateTime.Parse("2015-01-01"), Active = true });
    
            return data;
        }
    
    </script>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var getConstrainedTipXY = function () {
                //imageDom = this.target.dom;
                //tooltipDom = this.el.dom;
                //coordX = imageDom.clientLeft;
                //coordY = imageDom.clientTop + imageDom.clientHeight - (tooltipDom.clientTop + tooltipDom.clientHeight)
                //return [coordX, coordY];
    
                var me = this,
                    offsets, xy, dh, dw, de, bd, scrollX, scrollY, axy, sz;
                imageDom = me.target.dom;
                tooltipDom = this.el.dom;
    
                xy = me.getAlignToXY(me.target, 'tl-bl');
                dw = Ext.Element.getViewWidth() - 5;
                dh = Ext.Element.getViewHeight() - 5;
                de = document.documentElement;
                bd = document.body;
                scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5;
                scrollY = (de.scrollTop || bd.scrollTop || 0) + 5; tooltipSz = me.getSize();
                if (xy[1] - tooltipSz.height > dh)
                    return [xy[0], xy[1] - imageDom.clientHeight];
                else
                    return [xy[0], xy[1] - (tooltipDom.clientTop + tooltipDom.clientHeight)];
            };
    
            var ApplyPanel = function (layer) {
                var target = Ext.getCmp(layer.layerTargetID);
                var targetDom = target.el.dom;
                var myDom = layer.el.dom;
                myDom.style.top = targetDom.clientTop + "px";
                myDom.style.left = targetDom.clientLeft + "px";
                myDom.style.width = targetDom.clientWidth + "px";
                myDom.style.height = targetDom.clientHeight + "px";
            };
    
            Ext.define("MyOverrides", {
                override: "Ext.layout.CardLayout",
    
                nextImage: function () {
                    var oldCard = this.activeItem,
                        oldFilmLayer = Ext.getCmp("Layer" + oldCard.tag),
                        oldToolTip = Ext.getCmp("ToolTip" + oldCard.tag);
    
                    reshowToolTip = oldToolTip.isVisible();
    
                    oldFilmLayer.hide();
    
                    var newCard = this.activeItem.next() || this.owner.items.getAt(0),
                        newFilmLayer = Ext.getCmp("Layer" + newCard.tag);
    
                    this.setActiveItem(newCard);
                    newFilmLayer.show();
                    newCard.updateLayout();
    
                    if (reshowToolTip) {
                        oldToolTip.hide();
                        Ext.getCmp("ToolTip" + newCard.tag).show();
                    }
                }
            });
    
            Ext.tip.ToolTip.override({
                onDocMouseDown: function (e) {
                    var me = this;
                    if (!me.closable && !e.within(me.el.dom) && !e.within(me.target)) {
                        me.disable();
                        Ext.defer(me.doEnable, 100, me);
                    }
                }
            });
        </script>
        <style>
            .imageTooltip {
                background-color: #000000;
                opacity: 0.80;
                filter: Alpha(opacity=80);
            }
    
            .imageTooltipBody {
                padding: 5px 7px 5px 7px;
                font-size: 11px;
                color: #FFFFFF;
            }
    
            .x-ie7 .imageTooltip table.x-table-plain {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ClientIDMode="Static" ScriptMode="Development" />
            <ext:Panel runat="server" Layout="HBoxLayout" Width="600">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="3" />
                </LayoutConfig>
                <Items>
                    <ext:Panel runat="server" Html="Filler" Flex="1" />
                    <ext:Panel ID="ImageCarousel" runat="server" Width="480" Height="294" Layout="CardLayout">
                        <Bin>
                            <ext:TaskManager ID="ImageCarouselTaskManager" runat="server" ClientIDMode="Static"
                                AutoRunDelay="4000">
                                <Tasks>
                                    <ext:Task TaskID="ImageCarouselTask" Interval="4000" AutoRun="true">
                                        <Listeners>
                                            <Update Handler="App.ImageCarousel.layout.nextImage();" />
                                        </Listeners>
                                    </ext:Task>
                                </Tasks>
                            </ext:TaskManager>
                        </Bin>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; May 05, 2015 at 3:31 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    So far I am not able to determine the reason of Layout run failed. I'll investigate further.

    From other side, it seems I cannot reproduce blinking...
  3. #3
    It turned out that a "Layout run failed" happens because of:
    BaseCls = "imageTooltip"
    Indeed, the best is to avoid overriding a component's BaseCls property.

    Please change to Cls = "imageTooltip".

    Also please change .imageTooltip { ... } to .x-tip.imageTooltip { ... } and add this for the ToolTip's CustomConfig:
    new ConfigItem { Name = "alwaysFramed", Value = "false", Mode = ParameterMode.Raw }
    Does it all help? I mean it does help getting rid of "Layout run failed", but I don't know it helps with blinking, because, as I said previously, seems I don't see that.

Similar Threads

  1. Replies: 14
    Last Post: Apr 27, 2016, 12:49 AM
  2. [CLOSED] Layout run failed
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 10, 2015, 7:57 AM
  3. [CLOSED] Layout run failed
    By ehmdb in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 27, 2013, 8:29 AM
  4. Replies: 13
    Last Post: Jul 18, 2013, 6:25 AM
  5. One to many - Load Failed OK
    By filipator in forum 1.x Help
    Replies: 2
    Last Post: Mar 23, 2009, 2:43 PM

Posting Permissions