Jan 16, 2012, 3:44 AM
[CLOSED] column layout IE6 bug
if you load in IE6 and do press the click me button
the column layout are stretched become 100% - 0%
TIA
the column layout are stretched become 100% - 0%
TIA
<ext:Viewport ID="Viewport_MultiPatient" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_MultiPatient" runat="server">
<North Split="true" Collapsible="false">
<ext:Panel ID="Panel_Header" runat="server" Layout="ColumnLayout" Height="30" MaxHeight="30" Padding="2">
<Content>
north
</Content>
</ext:Panel>
</North>
<Center>
<ext:Panel ID="Panel_Content" runat="server" Layout="customaccordion">
<Items>
<ext:Panel ID="Panel_Lab" runat="server" HideMode="Offsets">
<TopBar>
<ext:Toolbar ID="Toolbar_LabMenuBar" runat="server">
<Items>
<ext:Button ID="Button_Toggler_LabLeft" runat="server" Icon="ApplicationGet">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:ColumnLayout ID="ColumnLayout_LabContent" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.50">
<ext:Container ID="Container_LabContent_ResultList" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_LabContent_ResultList" runat="server">
<Center>
<ext:Panel runat="server" ID="Panel1" Html="test" ></ext:Panel>
</Center>
<South>
<ext:Panel runat="server" ID="Panel_LabContent_ResultList_Button" Height="1" >
<BottomBar>
<ext:Toolbar ID="Toolbar_LabContent_ResultList_Button" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill_Lab_Button" runat="server"></ext:ToolbarFill>
<ext:ButtonGroup ID="ButtonGroup_Lab_ResultList_View" runat="server">
<Items>
<ext:Button ID="Button_Lab_ResultList_View" runat="server" Text="View" Icon="PageWhiteGo">
<Listeners>
<Click Handler="selectObject(this, 'GridPanel_Lab_ResultList', 'VIEW', 'LAB');" />
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</South>
</ext:BorderLayout>
</Items>
</ext:Container>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.50">
<ext:Container ID="Container_LabContent_ReportList" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_LabContent_ReportList" runat="server">
<North>
<ext:Panel runat="server" ID="Panel_LabContent_ReportList_Selector" AnchorHorizontal="right" AutoHeight="true">
<Content>
test
</Content>
</ext:Panel>
</North>
<Center>
<ext:Panel ID="Panel_LabContent_ReportList_Content" runat="server" AutoScroll="true">
<Content>
asd
</Content>
</ext:Panel>
</Center>
<South>
<ext:Panel runat="server" ID="Panel_LabContent_ReportList_Button" Height="1" >
<BottomBar>
<ext:Toolbar ID="Toolbar_LabContent_ReportList_Button" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server"></ext:ToolbarFill>
<ext:ButtonGroup ID="ButtonGroup_Lab_ReportList_SignPrint" runat="server">
<Items>
<ext:Button ID="Button_Lab_ReportList_SignPrint" runat="server" Text="Sign/Print" IconCls="print_sign_icon">
<Listeners>
<Click Handler="selectObject(this, 'reportlist-content', 'SIGNPRINT', 'LAB');" />
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</South>
</ext:BorderLayout>
</Items>
</ext:Container>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
<ext:Panel ID="Panel_Rad" runat="server" HideMode="Offsets">
<TopBar>
<ext:Toolbar ID="Toolbar_Rad" runat="server">
<Items>
<ext:Button ID="Button_Toggler_RadLeft" runat="server" Icon="Application" Text="CLICK ME">
<Listeners>
<Click Handler="Ext.net.DirectMethods.Clicked();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:ColumnLayout ID="ColumnLayout_RadContent" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.50">
<ext:Container ID="Container_RadContent_ResultList" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_RadContent_ResultList" runat="server">
<Center>
<ext:Panel runat="server" ID="Panel2" Html="rad content" ></ext:Panel>
</Center>
<South>
<ext:Panel runat="server" ID="Panel_RadContent_ResultList_Button" Height="1" >
<BottomBar>
<ext:Toolbar ID="Toolbar_RadContent_ResultList_Button" runat="server">
<Items>
<ext:ButtonGroup ID="ButtonGroup_Rad_ResultList_View" runat="server">
<Items>
<ext:Button ID="Button_Rad_ResultList_View" runat="server" Text="View" Icon="PageWhiteGo">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="ButtonGroup_Rad_ResultList_SelectAll" runat="server">
<Items>
<ext:Button ID="Button_Rad_ResultList_SelectAll" runat="server" Text="Select All" Icon="PageWhiteText">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</South>
</ext:BorderLayout>
</Items>
</ext:Container>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.50">
<ext:Container ID="Container_RadContent_ReportList" runat="server">
<Items>
<ext:BorderLayout ID="BorderLayout_RadContent_ReportList" runat="server">
<North>
<ext:Panel runat="server" ID="Panel_RadContent_ReportList_Selector" AnchorHorizontal="right" AutoHeight="true">
<Content>
top
</Content>
</ext:Panel>
</North>
<Center>
<ext:Panel ID="Panel_RadContent_ReportList_Content" runat="server" AutoScroll="true">
<Content>
asdf
</Content>
</ext:Panel>
</Center>
<South>
<ext:Panel runat="server" ID="Panel_RadContent_ReportList_Button" Height="1">
<BottomBar>
<ext:Toolbar ID="Toolbar_RadContent_ReportList_Button" runat="server">
<Items>
<ext:ButtonGroup ID="ButtonGroup_Rad_ReportList_PrintPreview" runat="server">
<Items>
<ext:Button ID="Button_Rad_ReportList_PrintPreview" runat="server" Text="Print Preview" Icon="PageWhiteMagnify">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="ButtonGroup_Rad_ReportList_Print" runat="server">
<Items>
<ext:Button ID="Button_Rad_ReportList_Print" runat="server" Text="Print" Icon="Printer">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup ID="ButtonGroup_Rad_ReportList_SignPrint" runat="server">
<Items>
<ext:Button ID="Button_Rad_ReportList_SignPrint" runat="server" Text="Sign/Print" IconCls="print_sign_icon">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</South>
</ext:BorderLayout>
</Items>
</ext:Container>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
<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 = true;
}
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();
}
};
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;
},
// On column resize, explicitly size the Components to the left and right of the SplitBar
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>
Last edited by Daniil; Jan 18, 2012 at 5:42 AM.
Reason: [CLOSED]