Feb 15, 2012, 7:34 AM
[CLOSED] Ext.Button: Width has different sizes between panels
I'm not sure how to explain this. Basically I have a viewport with 2 panels using a custom accordion layout. Each panel contains a button with the same label. The 1st panel display the width of the button correctly but the button in the 2nd panel grows wider with extra padding on the left and right side.
Somehow, if I remove the DOCTYPE, everything is okay. Can you advice if I should use a different DOCTYPE or if I can remove this without issue?
Thanks!
Here is the complete client-side script:
Somehow, if I remove the DOCTYPE, everything is okay. Can you advice if I should use a different DOCTYPE or if I can remove this without issue?
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"
** I am using IE 8 but the target users are IE6 upwards.Thanks!
Here is the complete client-side script:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.ExtNet.Common.WebForm1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<title>Untitled Page</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder_ScriptFiles" runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.layout.CustomAccordionLayout = Ext.extend(Ext.layout.AccordionLayout, {
type : 'customaccordion',
renderItem : function (c) {
c.collapseEl = "body";
if (this.animate === false) {
c.animCollapse = false;
}
if (this.autoWidth) {
c.autoWidth = false;
}
if (this.collapseFirst !== undefined) {
c.collapseFirst = this.collapseFirst;
}
if (!this.activeItem && !c.collapsed) {
this.setActiveItem(c, true);
}
else if (this.activeItem && this.activeItem != c) {
c.collapsed = true;
}
Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
c.on('beforeexpand', this.beforeExpand, this);
},
onRemove : function (c) {
Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
c.un('beforeexpand', this.beforeExpand, this);
},
setItemSize : function (item, size) {
if (this.fill && item) {
var hh = 0,
i,
ct = this.getRenderedItems(this.container),
len = ct.length,
p;
for (i = 0; i < len; i++) {
if ((p = ct[i]) != item && !p.hidden) {
//hh += p.topToolbar.getHeight();
hh += 30;
}
};
size.height -= hh;
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS.customaccordion = Ext.layout.CustomAccordionLayout;
</script>
<script type="text/javascript">
Ext.net.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {
monitorResize : true,
extraCls : "x-column",
scrollOffset : 0,
margin : 0,
split : false,
fitHeight : true,
background : false,
// private
isValidParent : function (c, target) {
return this.innerCt && (c.getPositionEl ? c.getPositionEl() : c.getEl()).dom.parentNode == this.innerCt.dom;
},
renderAll : function (ct, target) {
if (this.split && !this.splitBars) {
this.splitBars = [];
this.margin = this.margin || 5;
}
Ext.net.ColumnLayout.superclass.renderAll.apply(this, arguments);
},
getLayoutTargetSize : function () {
var target = this.container.getLayoutTarget(),
ret;
if (target) {
ret = target.getViewSize();
// IE in strict mode will return a width of 0 on the 1st pass of getViewSize.
// Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
// with getViewSize
if (Ext.isIE && Ext.isStrict && ret.width === 0) {
ret = target.getStyleSize();
}
ret.width -= (target.getPadding("lr") + this.scrollOffset);
ret.height -= target.getPadding("tb");
}
return ret;
},
// private
onLayout : function (ct, target) {
var cs = ct.items.items, len = cs.length, c, cel, i,
splitsWidth = 0;
if (!this.innerCt) {
target.addClass("x-column-layout-ct");
if (this.background) {
target.addClass("x-column-layout-bg-ct");
}
this.innerCt = target.createChild({ cls : "x-column-inner" });
this.innerCt.createChild({ cls : "x-clear" });
}
this.renderAll(ct, this.innerCt);
//var size = Ext.isIE && ((target.dom != Ext.getBody().dom) && (target.dom != (Ext.net.ResourceMgr.getAspForm() || {}).dom)) ? target.getStyleSize() : target.getViewSize();
var size = this.getLayoutTargetSize();
if (size.width < 1 && size.height < 1) { // display none?
return;
}
var w = size.width,
h = size.height;
this.availableWidth = w;
var pw = this.availableWidth,
lastProportionedColumn;
if (this.fitHeight) {
this.innerCt.setSize(w, h);
} else {
this.innerCt.setWidth(w);
}
for (i = 0; i < len; i++) {
c = cs[i];
cel = c.getPositionEl();
if (this.margin && (i < (len - 1))) {
cel.setStyle("margin-right", this.margin + "px");
}
if (c.columnWidth) {
lastProportionedColumn = i;
} else {
pw -= c.getSize().width;
}
if (i < (len - 1)) {
pw -= (cel.getMargins("lr") || this.margin);
}
}
var remaining = (pw = pw < 0 ? 0 : pw),
splitterPos = 0,
cw,
cmargin;
for (i = 0; i < len; i++) {
c = cs[i];
cel = c.getPositionEl();
if (c.columnWidth) {
cw = (i === lastProportionedColumn) ? remaining : Math.floor(c.columnWidth * pw);
cmargin = cel.getMargins("lr");
if (!cmargin && (i < (len - 1))) {
cmargin = this.margin;
}
cmargin = 0;
if (this.fitHeight) {
c.setSize(cw - cmargin, h);
} else {
c.setSize(cw - cmargin);
}
remaining -= cw;
} else if (this.fitHeight) {
c.setHeight(h);
}
if (this.split) {
cw = cel.getWidth();
if (i < (len - 1)) {
splitterPos += cw;
if (this.splitBars[i]) {
this.splitBars[i].el.setHeight(h);
} else {
this.splitBars[i] = new Ext.SplitBar(this.innerCt.createChild({
cls : "x-layout-split x-layout-split-west",
style : {
top : "0px",
left : splitterPos + "px",
height : h + "px"
}
}), cel);
this.splitBars[i].index = i;
this.splitBars[i].leftComponent = c;
this.splitBars[i].addListener("resize", this.onColumnResize, this);
minSize = Math.max(c.boxMinWidth || 5, 5);
this.splitBars[i].minSize = minSize
splitsWidth += minSize;
}
splitterPos += this.splitBars[i].el.getWidth();
}
this.maxWidth = pw - splitsWidth;
}
}
if (this.split) {
this.setMaxWidths();
}
if (Ext.isIE) {
if (i = target.getStyle("overflow") && i !== "hidden" && !this.adjustmentPass) {
var ts = this.getLayoutTargetSize();
if (ts.width !== size.width) {
this.adjustmentPass = true;
this.onLayout(ct, target);
}
}
}
delete this.adjustmentPass;
},
onColumnResize : function (sb, newWidth) {
if (sb.dragSpecs.startSize) {
sb.leftComponent.setWidth(newWidth);
var items = this.container.items.items,
expansion = newWidth - sb.dragSpecs.startSize,
i,
c,
w,
len;
for (i = sb.index + 1, len = items.length; expansion && i < len; i++) {
c = items[i];
w = c.el.getWidth();
newWidth = w - expansion;
if (newWidth < this.minWidth) {
c.setWidth(this.minWidth);
} else if (newWidth > this.maxWidth) {
expansion -= (newWidth - this.maxWidth);
c.setWidth(this.maxWidth);
} else {
c.setWidth(c.el.getWidth() - expansion);
break;
}
}
this.setMaxWidths();
}
},
setMaxWidths : function () {
var items = this.container.items.items,
spare = items[items.length - 1].el.dom.offsetWidth - 100,
i = items.length - 2;
for (i; i > -1; i--) {
var sb = this.splitBars[i],
sbel = sb.el,
c = items[i],
cel = c.el,
itemWidth = cel.dom.offsetWidth;
sbel.setStyle("left", (cel.getX() - Ext.fly(cel.dom.parentNode).getX() + itemWidth) + "px");
sb.maxSize = itemWidth + spare;
sb.setCurrentSize(itemWidth);
spare = itemWidth - 100;
}
},
onResize : function () {
if (this.split) {
var items = this.container.items.items, tw = 0, c, i,
elWidth;
if (items[0].rendered) {
for (i = 0; i < items.length; i++) {
c = items[i];
tw += c.el.getWidth() + c.el.getMargins("lr");
}
for (i = 0; i < items.length; i++) {
c = items[i];
elWidth = c.el.getWidth();
if (elWidth > 0) {
c.columnWidth = (elWidth + c.el.getMargins("lr")) / tw;
}
}
}
}
Ext.net.ColumnLayout.superclass.onResize.apply(this, arguments);
}
});
Ext.reg("netcolumn", Ext.net.ColumnLayout);
Ext.Container.LAYOUTS.netcolumn = Ext.net.ColumnLayout;
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager_MultiPatient" runat="server" ShowWarningOnAjaxFailure="false"/>
<ext:Viewport ID="Viewport_MultiPatient" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_MultiPatient" runat="server">
<Center>
<ext:Panel ID="Panel_Content" runat="server" Layout="customaccordion">
<Items>
<ext:Panel ID="Panel_Lab" runat="server">
<TopBar>
<ext:Toolbar ID="Toolbar_LabMenuBar" runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button_Toggler_LabRight" runat="server" Icon="ApplicationGet">
<Listeners>
<Click Handler="Ext.net.DirectMethods.ToggleBar('LAB');" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Button ID="Button2" runat="server" Text="Print Preview X" Icon="Printer" StandOut="true"></ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel_Rad" runat="server">
<TopBar>
<ext:Toolbar ID="Toolbar_Rad" runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button_Toggler_RadRight" runat="server" Icon="Application">
<Listeners>
<Click Handler="Ext.net.DirectMethods.ToggleBar('RAD');" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Button ID="Button3" runat="server" Text="Print Preview X" Icon="Printer" StandOut="true"></ext:Button>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</body>
</html>
And here is the server-side code:using Ext.Net;
using System;
namespace WebApplication.ExtNet.Common
{
public partial class WebForm1 : System.Web.UI.Page
{
[Ext.Net.DirectMethod]
public void ToggleBar(string Panel)
{
switch (Panel)
{
case "LAB":
this.Panel_Lab.Expand();
break;
case "RAD":
this.Panel_Rad.Expand();
break;
}
}
}
}
Last edited by Daniil; Feb 16, 2012 at 8:01 AM.
Reason: Please use [CODE] tags for any code, [CLOSED]