[CLOSED] Ext.Button: Width has different sizes between panels

  1. #1

    [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?

    "<!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!

    Click image for larger version. 

Name:	003.jpg 
Views:	110 
Size:	43.4 KB 
ID:	3830

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

    I was able to reproduce the problem with IE7 only. Could you confirm?
  3. #3
    As a workaround I can suggest the following Expand listener for the Panel_Rad.
    <Expand Handler="if (Ext.isIE7) {
                            Button3.doAutoWidth();
                        }" 
            Delay="1"
            Single="true" />
  4. #4
    Hi Daniil,

    Perhaps my IE8 (8.0.6001.18702) is not the latest update and still have the same behavior as IE7. But thank you for the solution, I can also use it for IE8 and it works perfectly. Please close this ticket.

Similar Threads

  1. CSS to format button sizes and text
    By mtrutledge in forum 1.x Help
    Replies: 0
    Last Post: Apr 25, 2012, 6:28 PM
  2. [CLOSED] button width IE7
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 24, 2011, 6:51 AM
  3. [CLOSED] Borderlayout in ViewPort not honoring sizes.
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 25, 2011, 3:10 PM
  4. Full width (%age width) ext:Panels ?
    By henricook in forum 1.x Help
    Replies: 2
    Last Post: Jun 04, 2010, 4:15 PM
  5. Replies: 1
    Last Post: May 28, 2010, 6:52 AM

Posting Permissions