1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    4
    Vote Rating
    0
    Plymp is on a distinguished road

      0  

    Question [SOLVED] how to get size of a panel into form fields?

    [SOLVED] how to get size of a panel into form fields?


    Hi all,

    First off: I'm terribly inexperienced with javascript, so my apologies if this is going to be a stupid (and long) question.

    I'm working on a website with some menus (west, east and south) and a center panel that displays output created by SAS stored processes (SAS programs that sends html output to the client). Which menus are visible is taken care of by SAS, so not all panels are always present (the center panel is). The output in the center panel is often a graph created by SAS based on the submission of a form in one of the other panels. For optimal layout I want SAS to use the entire width and height of the center panel. For this the width and height of the center panel needs to be in a (hidden) input field in a form. When one of the panel collapses or is resized these values need to be updated.

    A simple example of the site is:

    Code:
    <html>
    
    <head>
      <title>test for layout</title>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="resources/css/xtheme-darkgray.css" />
        
         <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-all.js"></script>
        
        <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
            color: #ffffff;
        }
        p {
            margin:5px;
        }
        </style>
        <script type="text/javascript">
        
        Ext.onReady(function(){
    
           var viewport = new Ext.Viewport({
                layout:'border',
                    items:[
                    {
                        region:'east',
                        split:true,
                        title:'&nbsp;',
                        width: 300,
                        minWidth: 100,
                        collapsible: true,
                        margins:'2 0 0 0',
                        layout:'accordion',
                        layoutConfig:{
                            animate:true
                        },
                        items: [{
                            contentEl: 'east1',
                            title:'Menu 1',
                            border:false
                        },{
                            title:'Menu 2',
                            contentEl: 'east2',
                            border:false
                        },{
                            title:'Menu 3',
                            contentEl: 'east3',
                            border:false
                            }]
                    } ,
                    {
                        region:'south',
                        contentEl:'south',
                        split: true,
                        height: 200,
                        minSize: 100,
                        collapsible: true,
                        title:'Bottom menu',
                        margins:'0 0 0 0',
                        layout:'fit',
                        items:
                            new Ext.TabPanel({
                                border:false,
                                activeTab:0,
                                tabPosition:'top',
                                items:[{
                                    contentEl:'tab1',
                                    title: 'Tab 1',
                                    autoScroll:true
                                },
                                {
                                    contentEl:'tab2',
                                    title: 'Tab 2',
                                    autoScroll:true
                                },
                                {
                                    contentEl:'tab3',
                                    title: 'Tab 3',
                                    autoScroll:true
                                }
                                ]
                            })
                    } ,
                    {
                        region:'center',
                        contentEl: 'center',
                        split:false,
                        margins:'2 0 0 0'
                    }                
                    ]
            });
            
            document.testform.testfield.value=document.getElementById('ext-comp-1011').style.width;
            document.testform.testfield2.value=document.getElementById('ext-comp-1010').style.top;
            
        });
        
        </script>
    </head>
    <body>
    <div id='east1'>Right hand menu 1: resizable and collapsible.</div>
    <div id='east2'>Right hand menu 2: resizable and collapsible.</div>
    <div id='east3'>Right hand menu 3: resizable and collapsible.</div>
    <div id='south'>
        <div id='tab1'>Bottom menu with tabs 1: resizable and collapsible.</div>
        <div id='tab2'>Bottom menu with tabs 2: resizable and collapsible.</div>
        <div id='tab3'>Bottom menu with tabs 3: resizable and collapsible.</div>
    </div>
    <div id='center'>Central screen where results will be displayed.
    <form name="testform">
    Width of center
    <input type="text" name="testfield" /><br>
    Height of center
    <input type="text" name="testfield2" />
    </form>
    </div>
     </body>
    </html>
    I'm now taking the width of ext-comp-1011 and the top of ext-comp-1010, but I'm not sure if these names are always going to be the same. Besides the form fields are not updated when a panel is resized.

    Is there an easy way of getting the size of a specific panel into form fields? If so, is it possible to have these values update if any of the panels is resized?

    Thanks in advance for your help!
    Last edited by Plymp; 14 May 2008 at 3:49 AM. Reason: question answered

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The center panel never gets resized (it only reacts to other panels being collapsed/expanded).

    You could catch the resize/collapse/expand events of the other panels in the border layout. When this happens, you could then get the center panel and using either the inner/framed width (depending on your need).

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    4
    Vote Rating
    0
    Plymp is on a distinguished road

      0  

    Default


    Thanks for your reply evant. I've tried some things and do have it working now. I added a listener to the center panel that triggers another javascript function. That function takes the size of the parent div of the center div and writes it to a form field.

    It might help someone else at some point, so I'll try to explain what I did (I'm still a javascript newbie, so might not be the best way to do this). The listener was added to the center panel by adding the following code below region:'center':

    Code:
    listeners: {'resize' : function (){getCenterWidth('testfield')}}
    The new function is:

    Code:
    function getCenterWidth(fieldID) {
            if (document.getElementById) {
                if (document.getElementById('center').parentNode.style.width) {
                    document.getElementById(fieldID).value = document.getElementById('center').parentNode.style.width
                }
            }
    }
    The form field with ID 'testfield' is now automatically filled with the width of the center panel and is updated when any of the other panels is resized or collapsed. It seems to be working in IE and FF, so that's good enough for me (default client is IE anyway).

Thread Participants: 1