1. #1
    Ext User
    Join Date
    Feb 2008
    Location
    ZhongShan City,GuangDong, China
    Posts
    6
    Vote Rating
    0
    carzheng is on a distinguished road

      0  

    Question "west region" and "center region" in border layout problem!!

    "west region" and "center region" in border layout problem!!


    How to implement "west region" and "center region" use the same scrollbar in border layout?
    If it can't implement. hava any way to Substitute it?

    code:
    <html>
    <head>
    <title>Complex Layout</title>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="Portal.js"></script>
    <script type="text/javascript" src="PortalColumn.js"></script>
    <script type="text/javascript" src="Portlet.js"></script>
    <link rel="stylesheet" type="text/css" href="portal.css" />
    <link rel="stylesheet" type="text/css" href="tasks.css" />
    <link rel="stylesheet" type="text/css" href="sample.css" />
    <style type="text/css">
    html, body {
    font:normal 12px verdana;
    margin:0;
    padding:0;
    border:0 none;
    overflow:hidden;
    height:100%;
    }
    p {
    margin:5px;
    }
    .settings {
    background-image:url(../shared/icons/fam/folder_wrench.png);
    }
    .nav {
    background-image:url(../shared/icons/fam/folder_go.png);
    }
    </style>

    <script type="text/javascript">
    var quickSearch = new Ext.Panel({
    frame:true,
    title: 'Quick Search',
    collapsible:true,
    contentEl:'QuickSearch',
    titleCollapse: true
    });

    var links = new Ext.Panel({
    frame:true,
    title: 'Links',
    collapsible:true,
    contentEl:'Links',
    titleCollapse: true
    });

    var custom = new Ext.Panel({
    frame:true,
    title: 'Custom',
    collapsible:true,
    contentEl:'Custom',
    titleCollapse: true
    });

    var customGrouping= new Ext.Panel({
    frame:true,
    title: 'Custom Grouping',
    collapsible:true,
    contentEl:'CustomGrouping',
    titleCollapse: true
    });

    var actionPanel = new Ext.Panel({
    id:'action-panel',
    region:'west',
    split:true,
    collapsible: true,
    collapseMode: 'mini',
    width:210,
    minWidth: 150,
    border: false,
    baseCls:'x-plain',
    items: [quickSearch, links, custom, customGrouping]
    });

    var centerPanel = new Ext.Panel({
    region:'center',
    defaults: { bodyStyle:'padding:2px'},
    //autoScroll : true,
    items: [
    {
    title: 'Demo 1',
    tools:tools,
    html:'bb<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
    },
    {
    title: 'Demo 2',
    tools:tools,
    html:'bb<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
    },
    {
    title: 'Demo 2',
    tools:tools,
    html:'bb<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'
    }
    ]
    });

    var tools = [{
    id:'gear',
    handler: function(){
    Ext.Msg.alert('Message', 'The Settings tool was clicked.');
    }
    },{
    id:'close',
    handler: function(e, target, panel){
    panel.ownerCt.remove(panel, true);
    }
    }];

    Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var viewport = new Ext.Viewport({
    layout:'border',
    items:[
    new Ext.BoxComponent({
    region:'north',
    el: 'north',
    height:32
    }),
    {
    region:'center',
    //layout: 'border',
    autoScroll : true,
    html: 'xxxx</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>'
    /*
    items: [
    {
    region:'center',
    autoScroll : true,
    items: [
    {
    region: 'center',
    layout: 'border',
    //html: 'xxxx</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>'
    items: [actionPanel, centerPanel]
    }
    ]
    }
    ]
    */
    //items: [actionPanel, centerPanel]
    }
    ]
    });
    });
    </script>
    </head>

    <body>
    <script type="text/javascript" src="../examples.js"></script>

    <ul id="QuickSearch" class="x-hidden">
    <li>
    <table>
    <tr>
    <td>
    <select>
    <option>crm.u0000003</option>
    <option>crm.u0000008</option>
    <option>crm.u0000009</option>
    <option>crm.u0000002</option>
    <option>crm.u0000019</option>
    </select>
    </td>
    </tr>
    <tr>
    <td nowrap="yes">
    <input type=text/> &nbsp; <button>Go</button>
    </td>
    </tr>
    </table>
    </li>
    </ul>
    <ul id="Links" class="x-hidden">
    <li id="new-task">
    <img src="images/s.gif" class="icon-edit"/>
    <a id="action-new" href="#">Add a new task</a>
    </li>
    <li style="display:none;">
    <img src="images/s.gif" class="icon-complete"/>
    <a id="action-complete" href="#">Mark selected task<span class="s">s</span> completed</a>
    </li>
    <li style="display:none;">
    <img src="images/s.gif" class="icon-active"/>
    <a id="action-active" href="#">Mark selected task<span class="s">s</span> active</a>
    </li>
    <li style="display:none;">
    <img src="images/s.gif" class="icon-delete"/>
    <a id="action-delete" href="#">Delete selected task<span class="s">s</span></a>
    </li>
    </ul>
    <ul id="Custom" class="x-hidden">
    <li>
    <img src="images/s.gif" class="icon-by-date"/>
    <a id="group-date" href="#">By Date</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-category"/>
    <a id="group-cat" href="#">By Category</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-no-group"/>
    <a id="no-group" href="#">No Grouping</a>
    </li>
    </ul>
    <ul id="CustomGrouping" class="x-hidden">
    <li>
    <img src="images/s.gif" class="icon-by-date"/>
    <a id="group-date" href="#">By Date</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-category"/>
    <a id="group-cat" href="#">By Category</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-no-group"/>
    <a id="no-group" href="#">No Grouping</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-date"/>
    <a id="group-date" href="#">By Date</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-category"/>
    <a id="group-cat" href="#">By Category</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-no-group"/>
    <a id="no-group" href="#">No Grouping</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-date"/>
    <a id="group-date" href="#">By Date</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-category"/>
    <a id="group-cat" href="#">By Category</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-no-group"/>
    <a id="no-group" href="#">No Grouping</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-date"/>
    <a id="group-date" href="#">By Date</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-by-category"/>
    <a id="group-cat" href="#">By Category</a>
    </li>
    <li>
    <img src="images/s.gif" class="icon-no-group"/>
    <a id="no-group" href="#">No Grouping</a>
    </li>
    </ul>

    <div id="north">
    <TABLE id=pageHeaderId99999 height=0 cellSpacing=0 cellPadding=0 width="100%" background=hdrbgrd.jpg border=0>
    <tr> <td width="10px"> <img src="Austar-logo-01-80x47.gif"/> </td> </tr>
    </TABLE>
    </div>
    <div id="center2"> </div>
    </body>
    </html>
    You can do it.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could listen for the scroll event of the body of each panel and synchronise the scrollOfset of both elements.
    Another option would be to replace the border layout with a column layout (less features, but scrolling works standard).

  3. #3
    Ext User
    Join Date
    Feb 2008
    Location
    ZhongShan City,GuangDong, China
    Posts
    6
    Vote Rating
    0
    carzheng is on a distinguished road

      0  

    Talking


    Quote Originally Posted by Condor View Post
    You could listen for the scroll event of the body of each panel and synchronise the scrollOfset of both elements.
    Another option would be to replace the border layout with a column layout (less features, but scrolling works standard).
    Border layout work! Thank you very much!
    You can do it.

Thread Participants: 1