论坛首页 → AJAX版 → EXT →

一个页面中有多个布局显示标题图片时有问题

 
浏览 967 次
主题：一个页面中有多个布局显示标题图片时有问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • rcarlosdasilva
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 11
  • 积分: 30
  • 来自: 青岛
时间：2007-09-22
引用

刚刚开始学Ext，用的1.1.1
想做个小东西，界面可能想的有些复杂，现在出现个问题，就是在页面中有3个borderLayout对象，现在只有一个对象content_layout中的north那个方向的布局使用了titlebar: true,collapsible: true,animate: true，useShim:true,cmargins: {top:2,bottom:2,right:2,left:2}
其余的titlebar和collapsible都没有显示。
现在我想让这唯一一个显示出来的collapsible在他收缩回去以后，在上面显示一幅图片，就像Ext自带的doc中左侧的documentation explorer收缩回去后显示的那幅图片一样的效果。
我现在的代码是显示不出来了，不知道是不是由于布局中，content_layout是被包围在最中间的一个布局造成的，还是我写的代码有问题，说是用.x-layout-collapsed-north 给设定一下图片的路径就好了，没有用，有没有会的啊，帮我看看。

顺便把代码贴出来：

index.jsp ::

java 代码
  1. <%@ page language="java"  pageEncoding="gb2312"%>   
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  4. <html>   
  5.     <head>   
  6.   
  7.         <title>论坛</title>   
  8.         <meta http-equiv="pragma" content="no-cache">   
  9.         <meta http-equiv="cache-control" content="no-cache">   
  10.         <meta http-equiv="expires" content="0">   
  11.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  12.         <meta http-equiv="description" content="This is my page">   
  13.         <link rel="stylesheet" type="text/css" href="src/resources/css/ext-all.css">   
  14.         <!-- <link rel="stylesheet" type="text/css" href="src/resources/css/xtheme-vista.css"/>   
  15.         <link rel="stylesheet" type="text/css" href="src/resources/css/layout.css"/> -->   
  16.         <link rel="stylesheet" type="text/css" href="src/mycss/main_style.css">   
  17.         <script type="text/javascript" src="src/adapter/ext/ext-base.js"></script>   
  18.         <script type="text/javascript" src="src/ext-all.js"></script>   
  19.         <script type="text/javascript" src="src/ext-all-debug.js"></script>   
  20.         <script type="text/javascript" src="src/myjs/main_script.js"></script>   
  21.         <!-- style type="text/stylesheet">   
  22.             .x-layout-collapsed-north {   
  23.                 background-image: url(images/collapse-bg.gif);   
  24.                 background-repeat: no-repeat;   
  25.                 background-position: center;   
  26.             }   
  27.         </style> -->   
  28.     </head>   
  29.   
  30.     <body>   
  31.         <div id="bg_border_l">   
  32.             <table cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="#284c81">   
  33.                 <tr><td></td></tr>   
  34.             </table>   
  35.         </div>   
  36.         <div id ="container">   
  37.             <div id="bbs_log_area">   
  38.                 <table cellpadding="0" cellspacing="0" width="100%" height="100%" background="images/title_bg.gif">   
  39.                     <tr><td><img src="images/log_img.gif" /></td></tr>   
  40.                 </table>   
  41.             </div>                 
  42.             <div id="content">   
  43.                 <div id="user_control_area" class="x-layout-inactive-content">   
  44.                     <iframe frameborder="0" scrolling="hidden" marginheight="0" marginwidth="0" id="login_frame" height="100%" width="100%" src="user/login.jsp" scrolling="no"></iframe>   
  45.                 </div>   
  46.                 <div id="bbs_content_area" class="x-layout-inactive-content">正文</div>   
  47.             </div>   
  48.         </div>   
  49.         <div id="bg_border_r">   
  50.             <table cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="#284c81">   
  51.                 <tr><td></td></tr>   
  52.             </table>   
  53.         </div>   
  54.     </body>   
  55. </html>   


    1. Area_onload = function() {   
    2.     var title_layout;   
    3.     var main_layout;   
    4.     var border_layout;   
    5.        
    6.     return {   
    7.         init : function() {   
    8.             border_layout = new Ext.BorderLayout(document.body, {   
    9.                 west : {   
    10.                     split:false,   
    11.                     initialSize: 30,   
    12.                     titlebar: false  
    13.                 },   
    14.                 east : {   
    15.                     split:false,   
    16.                     initialSize: 30,   
    17.                     titlebar: false  
    18.                 },   
    19.                 center : {   
    20.                     split:false,   
    21.                     titlebar: false,   
    22.                     autoScroll:true  
    23.                 }   
    24.             });   
    25.             border_layout.beginUpdate();   
    26.             border_layout.add('west',new Ext.ContentPanel('bg_border_l',null));   
    27.             border_layout.add('east',new Ext.ContentPanel('bg_border_r',null));   
    28.             border_layout.add('center',new Ext.ContentPanel('container',null));   
    29.             border_layout.endUpdate();   
    30.                
    31.                
    32.             main_layout = new Ext.BorderLayout('container', {   
    33.                 north : {   
    34.                     split:false,   
    35.                     initialSize: 33,   
    36.                     titlebar: false  
    37.                 },   
    38.                 center : {   
    39.                     titlebar: false,   
    40.                     autoScroll:true  
    41.                 }   
    42.             });   
    43.             main_layout.beginUpdate();   
    44.             main_layout.add('north',new Ext.ContentPanel('bbs_log_area',null));   
    45.             main_layout.add('center',new Ext.ContentPanel('content',null));   
    46.             main_layout.endUpdate();   
    47.                
    48.                
    49.             var title = Ext.get('content');            
    50.             content_layout = new Ext.BorderLayout(title, {   
    51.                 north : {   
    52.                     split: false,   
    53.                     initialSize: 150,   
    54.                     titlebar: true,   
    55.                     collapsible: true,   
    56.                     autoScroll:false,   
    57.                     animate: true,   
    58.                     useShim:true,   
    59.                     cmargins: {top:2,bottom:2,right:2,left:2}   
    60.                 },   
    61.                 center : {   
    62.                     titlebar: false,   
    63.                     initialSize: 1000,   
    64.                     autoScroll:true  
    65.                 }   
    66.             });            
    67.             content_layout.beginUpdate();   
    68.             content_layout.add('north',new Ext.ContentPanel('user_control_area',{title: '用户控制面板', fitToFrame:true}));   
    69.             content_layout.add('center',new Ext.ContentPanel('bbs_content_area',null));   
    70.             content_layout.endUpdate();    
    71.         }   
    72.     }   
    73. }();   
    74.   
    75. Ext.EventManager.onDocumentReady(Area_onload.init,Area_onload,true);  

     

    有会的帮忙看一下，谢谢！！


    • main_script.js ::
    返回顶楼
       
    • yeaha
    • 等级: 初级会员
    • 用户头像
    • 性别:
    • 文章: 34
    • 积分: 40
    • 来自: 重庆
    时间：2007-09-22
    引用
    不要建立那么多BorderLayout，下面嵌套的layout用NestedLayoutPanel试试
    返回顶楼
       
    0 请登录后投票
    • rcarlosdasilva
    • 等级: 初级会员
    • 用户头像
    • 性别:
    • 文章: 11
    • 积分: 30
    • 来自: 青岛
    时间：2007-09-24
    引用
    如果有多个布局，想要指定某一个布局在收起的时候，上面显示一张图片怎么搞啊！
    返回顶楼
       
    0 请登录后投票
    • fangzhouxing
    • 等级: 三星会员
    • 用户头像
    • 性别:
    • 文章: 279
    • 积分: 348
    • 来自: 上海
    时间：2007-09-25
    引用
    研究一下Simple RSS Feed Viewer的例子中，它右侧的Panel收缩时，就能显示纵向的标题，好像使用图片实现的。在extjs.com论坛上有人提问过，但我找不到那个帖子了。
    返回顶楼
       
    0 请登录后投票
    • rcarlosdasilva
    • 等级: 初级会员
    • 用户头像
    • 性别:
    • 文章: 11
    • 积分: 30
    • 来自: 青岛
    时间：2007-09-27
    引用
    我也看过这种类似的例子，坛子上也有说只要在追加上一个样式就行了
    .x-layout-collapsed-north {
    background-image: url(images/collapse-bg.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    看的例子上都是一个布局，我把这行加上了，不知道是不是因为布局太多的原因，所以我没有看到效果
    返回顶楼
       
    0 请登录后投票
     
    论坛首页 → AJAX版 → EXT

    跳转论坛:
    JavaEye推荐