PDA

View Full Version : [CLOSED] Layout run failed IE7/IE8



cwolcott
Apr 24, 2015, 2:14 PM
I had some time to look at this again. This is related to the thread Image Caption: Film Layer (http://forums.ext.net/showthread.php?55991-Image-Caption-Film-Layer) and Image Caption: Film Layer (http://forums.ext.net/showthread.php?55991-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>

Daniil
Apr 27, 2015, 4:40 PM
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...

Daniil
Apr 28, 2015, 9:09 AM
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.