[CLOSED] column layout IE6 bug

  1. #1

    [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

    <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]
  2. #2
    Hi,

    I'm getting the
    Object Doesn't Support This Property or Method "Clicked"
    JavaScript error when click on the "CLICK ME" button.

    Also please clarify what changes did you make in Ext.net.ColumnLayout?

    Is the issue reproducible with a standard Ext.net.ColumnLayout without any changes?
  3. #3
    this is the code
            [Ext.Net.DirectMethod]
            public void Clicked()
            {
                this.Panel_Rad.Expand();
                this.Button_Toggler_RadLeft.Icon = Ext.Net.Icon.ApplicationGet;
            }
    Also please clarify what changes did you make in Ext.net.ColumnLayout?
    we're still using the 1.2 from download page, not svn and last time we're having problem with the splitter
    and this is the patch that you gave to us. no changes from our side

    Is the issue reproducible with a standard Ext.net.ColumnLayout without any changes?
    just tried. and yes.
  4. #4
    Quote Originally Posted by nhg_itd View Post
    we're still using the 1.2 from download page, not svn and last time we're having problem with the splitter
    and this is the patch that you gave to us. no changes from our side
    Understand. Could you provide the link on that thread?
  5. #5
    Quote Originally Posted by Daniil View Post
    Understand. Could you provide the link on that thread?
    this might help.
    http://forums.ext.net/showthread.php...8746#post68746
  6. #6
    Thanks, @GitzJoey.

    @nhg_itd, to fix the problem please remove
    HideMode="Offsets"
    of the Panel_Rad.

    According to the thread @GitzJoey has referred, I previously recommended to try to set up HideMode="Offsets" to fix the problem, but it didn't help. In addition, it even appeared to cause the problem in IE6. So, please remove it.

    Generally, sometimes HideMode="Offsets" might help, but please don't change HideMode (the default value is Display) if it's not really required.
  7. #7
    Hi Daniil,

    its look working fine, thanks and you can mark it closed

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] Two column scrolling layout
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 23, 2012, 9:47 PM
  3. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  4. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  5. [CLOSED] Layout property: column
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 15, 2008, 1:22 PM

Posting Permissions