Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Border Layout broken when used inside table

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default Border Layout broken when used inside table

    The following code works perfectly:

    Code:
    <html><head><title>test</title>
        <script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
        <script type="text/javascript" src="yui-ext.0.33/yui-ext.js"></script>
       	<link rel="stylesheet" type="text/css" href="yui-ext.0.33/resources/css/yui-ext.css">
    
    	<script type="text/javascript">
        var borderLayout;
        var tabPanel;
        function init () {
            if (borderLayout!=null) return;
            borderLayout = new YAHOO.ext.BorderLayout("layoutselector", {
                hideOnLayout: true,
                autoCreate: true,
                west: {
                    split:true,
                    initialSize: 255,
                    minSize: 255,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoCreate: true,
                    autoScroll: false
                },
                south: {
                    split:true,
                    initialSize: 100,
                    minSize: 100,
                    maxSize: 200,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoCreate: true,
                    autoScroll: false
                },
                center: {
                    titlebar: false,
                    tabPosition: 'top',
                    autoCreate: true,
                    autoScroll: true
                }
            });
            getEl("layoutselector").borderLayout=borderLayout;
            // build the layout
            borderLayout.beginUpdate();
            borderLayout.add('south', new YAHOO.ext.ContentPanel('helppanel', {title: 'Information', autoScroll: true, closable: true, autoCreate: true}));
            borderLayout.add('west', new YAHOO.ext.ContentPanel('treepanel', {title: 'Theme Hierarchy', autoScroll: true, autoCreate: true}));
            borderLayout.add('center', new YAHOO.ext.ContentPanel('quickpreview', {title: 'Quick', autoScroll: true, autoCreate: true}));
            borderLayout.add('center', new YAHOO.ext.ContentPanel('fullpreview', {title: 'Full', autoScroll: true, autoCreate: true}));
            borderLayout.endUpdate();
            tabPanel = borderLayout.getRegion("center").getTabs();
            tabPanel.activate('quickpreview');
        }
    
    	YAHOO.ext.EventManager.onDocumentReady(init);
    	</script></head><body>
      
      <div id="layoutselector"></div>
      
      </body></html>
    However if you put the div that the border layout should occupy inside a table, then it breaks horribly, eg:

    Code:
    <html><head><title>test</title>
        <script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
        <script type="text/javascript" src="yui-ext.0.33/yui-ext.js"></script>
       	<link rel="stylesheet" type="text/css" href="yui-ext.0.33/resources/css/yui-ext.css">
    
    	<script type="text/javascript">
        var borderLayout;
        var tabPanel;
        function init () {
            if (borderLayout!=null) return;
            borderLayout = new YAHOO.ext.BorderLayout("layoutselector", {
                hideOnLayout: true,
                autoCreate: true,
                west: {
                    split:true,
                    initialSize: 255,
                    minSize: 255,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoCreate: true,
                    autoScroll: false
                },
                south: {
                    split:true,
                    initialSize: 100,
                    minSize: 100,
                    maxSize: 200,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoCreate: true,
                    autoScroll: false
                },
                center: {
                    titlebar: false,
                    tabPosition: 'top',
                    autoCreate: true,
                    autoScroll: true
                }
            });
            getEl("layoutselector").borderLayout=borderLayout;
            // build the layout
            borderLayout.beginUpdate();
            borderLayout.add('south', new YAHOO.ext.ContentPanel('helppanel', {title: 'Information', autoScroll: true, closable: true, autoCreate: true}));
            borderLayout.add('west', new YAHOO.ext.ContentPanel('treepanel', {title: 'Theme Hierarchy', autoScroll: true, autoCreate: true}));
            borderLayout.add('center', new YAHOO.ext.ContentPanel('quickpreview', {title: 'Quick', autoScroll: true, autoCreate: true}));
            borderLayout.add('center', new YAHOO.ext.ContentPanel('fullpreview', {title: 'Full', autoScroll: true, autoCreate: true}));
            borderLayout.endUpdate();
            tabPanel = borderLayout.getRegion("center").getTabs();
            tabPanel.activate('quickpreview');
        }
    
    	YAHOO.ext.EventManager.onDocumentReady(init);
    	</script></head><body>
      
      <table><tr><td>
      <div id="layoutselector"></div>
      </td></tr></table>
      
      </body></html>
    [/code]

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    39
    Vote Rating
    0
      0  

    Default

    First, ensure you have a tbody tag in there for correct table markup. Then add width/height to the table.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Oddly, adding a width & height to the table allows the border layout to render correctly:

    Code:
    <table width="500" height="500"><tr><td>
      <div id="layoutselector"></div>
    </td></tr></table>
    For prerelease coding I can hard-code the width/height however before I can release my app I will need to have a resolution/workaround (that will allow my content to take up all of the available area)[/code]

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by gfraser
    First, ensure you have a tbody tag in there for correct table markup. Then add width/height to the table.
    tbody makes no difference whatsoever, and fixing the width/height of the table is not an option for the finally released application, since it requires the interface to fill the available area.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Also oddly, percentage heights work too!

    Code:
      <table width="100%" height="100%"><tr><td>
      <div id="layoutselector"></div>
      </td></tr></table>

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891
    Vote Rating
    89
      0  

    Default

    That's expected. The Layout adjusts itself to whatever height the containing element has.

    If you don't give the containing element a height, it won't work - there's no size to size itself to.

    The exception is when the containing element is document.body.

    The code is

    Code:
        getViewSize : function(){
            var size;
            if(this.el.dom != document.body){
                this.el.beginMeasure();
                size = this.el.getSize();
                this.el.endMeasure();
            }else{
                size = {width: YAHOO.util.Dom.getViewportWidth(), height: YAHOO.util.Dom.getViewportHeight()};
            }
            size.width -= this.el.getBorderWidth('lr')-this.el.getPadding('lr');
            size.height -= this.el.getBorderWidth('tb')-this.el.getPadding('tb');
            return size;
        },
    Anyway, why are you using a table for page layout? That's what the BorderLayout is for!

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Frustratingly when I apply the same workaround to my actual application (pixel OR percentage, tbody or no), then the display is still broken .. the YUI-ext code in the examples above is a cut/paste of the init code from my application, only the nesting of the target div is different (it's much deeper in my app)

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Animal
    Anyway, why are you using a table for page layout? That's what the BorderLayout is for!
    I am not using a table, however the rest of the webapp is ... I am embedding a YUI interface within 'confluence' an already existing webapp, it is neither possible nor desirable to break out of the webapp's sitemesh decoration.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by alainmoran
    Frustratingly when I apply the same workaround to my actual application (pixel OR percentage, tbody or no), then the display is still broken .. the YUI-ext code in the examples above is a cut/paste of the init code from my application, only the nesting of the target div is different (it's much deeper in my app)
    Update: If you use pixel sizes, then resize the screen, the border layout appears at the fixed pixel size, but positioned at 0,0 !!

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891
    Vote Rating
    89
      0  

    Default

    Make it not listen for window resizes. It's a config option.

    http://www.yui-ext.com/deploy/yui-ex...orWindowResize

Page 1 of 3 123 LastLast

Similar Threads

  1. Table inside BasicDialog
    By amitava in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 6 Mar 2007, 2:40 AM
  2. Don't want border of a layout region
    By wavel in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 26 Feb 2007, 9:17 PM
  3. Grid on a border layout
    By rodiniz in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 24 Feb 2007, 8:30 AM
  4. Border Layout preferences
    By Webnet in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 7 Feb 2007, 7:13 AM
  5. BasicDialogs within Border Layout
    By lakinm1 in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 17 Dec 2006, 1:18 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •