zoukankan      html  css  js  c++  java

  • ExtJs布局管理

    ExtJs布局管理

    ExtJsJavaScriptLayoutExtJs布局管理 

    所有ExtJs的Layout Class都在API Documentation->Ext->Layout下,如果想用哪种而已方式可以直接查询API帮助文档.我写这篇文章的意思是把学习的时候做的笔记保留下了,为了以后使用方便.

    下面列出的是一些常用的Layout.

    layout.html页面代码如下:

    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    5. <title>ExtJs Layout Example</title>  
    6. <link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"></link>  
    7. <script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>  
    8. <script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script>  
    9. <script type="text/javascript" src="../js/layout.js"></script>  
    10. </head>  
    11. <body>  
    12.     <div id="columnId"></div>  
    13.     <div id="borderId"></div>  
    14.     <div id="fitId"></div>  
    15.     <div id="accordionId"></div>  
    16.     <div id="anchorId"></div>  
    17. </body>  
    18. </html>  

    以下的代码都是放在..js/layout.js文件中的.

    1.columnLayout

    Js代码  收藏代码
    1. /* 
    2.     创建column布局 
    3. */  
    4. function createColumnPanel(){  
    5.     var obj = {  
    6.         title : '父面板',  
    7.         width : 600,  
    8.         height : 400,  
    9.         layout : 'column',//一列一列的显示容器中的元素  
    10.         items : [{  
    11.             xtype : 'panel',//子元素中默认的显示类型为:panel.也可以根据需要换成button等.  
    12.             title : '页面1',  
    13.             columnWidth : 0.5,//以面板整体宽度大小的25%大小进行填充.  
    14.             height : 200,//高度为固定值.  
    15.             layout : 'column',  
    16.             items : [{  
    17.                 xtype : 'button',  
    18.                 text : '按钮1',  
    19.                 columnWidth : 0.5  
    20.             },{  
    21.                 xtype : 'button',  
    22.                 text : '按钮2',  
    23.                 columnWidth : 0.5  
    24.             }],  
    25.             html : '我是面板1'  
    26.         },{  
    27.             title : '页面2',  
    28.             columnWidth : 0.5,  
    29.             height : 50,  
    30.             html : '我是面板2'  
    31.         }]  
    32.     } ;  
    33.     //实例化父面板  
    34.     var mainPanel = new Ext.Panel(obj) ;  
    35.     //将父面板添加到id为columnId的标签上.  
    36.     mainPanel.render("columnId") ;  
    37. }  

    2.borderLayout

    Js代码  收藏代码
    1. /* 
    2.     创建border布局 
    3. */  
    4. function createBorderPanel(){  
    5.     var obj = {  
    6.         title : '父面板',  
    7.         width : 600,  
    8.         height : 400,  
    9.         layout : 'border',//以东南西北中的方式显示容器中的元素  
    10.         items : [{  
    11.             title: 'North Region',  
    12.             region: 'north',     // 上  
    13.             height : 50  
    14.         },{  
    15.             title: 'South Region',  
    16.             region: 'south',     // 下  
    17.             height: 50  
    18.         },{  
    19.             title: 'West Region',  
    20.             region:'west',    // 左  
    21.             split: true,   //设置可以调整该panel的大小(宽度)  
    22.             collapsible: true,   //设置该面板是否可以收缩  
    23.              50  
    24.         },{  
    25.             title: 'East Region',  
    26.             region: 'east',     // 右  
    27.             width : 50  
    28.         },{  
    29.             title: 'Center Region',  
    30.             region: 'center',     // 中,此面板必须存在.  
    31.             layout: 'border',   
    32.             items: [{  
    33.                 title: 'west',  
    34.                 region: 'west',  
    35.                  '50%'  
    36.             },{  
    37.                 title: 'center',  
    38.                 region: 'center',  
    39.             }]  
    40.         }]  
    41.     } ;  
    42.     //实例化父面板  
    43.     var mainPanel = new Ext.Panel(obj) ;  
    44.     //将父面板添加到id为borderId的标签上.  
    45.     mainPanel.render("borderId") ;  
    46. }  

     3.fitLayout

    Js代码  收藏代码
    1. /* 
    2.     创建fit布局 
    3. */  
    4. function createFitPanel(){  
    5.     var obj = {  
    6.         title : '父面板',  
    7.         width : 600,  
    8.         height : 400,  
    9.         layout : 'fit',//填满整个外部容器,只能看到一个子元素  
    10.         items : [{  
    11.             title : '页面1',  
    12.             html : '我是面板1'  
    13.         },{  
    14.             title : '页面2',  
    15.             html : '我是面板2'  
    16.         }]  
    17.     } ;  
    18.     //实例化父面板  
    19.     var mainPanel = new Ext.Panel(obj) ;  
    20.     //将父面板添加到id为columnId的标签上.  
    21.     mainPanel.render("fitId") ;  
    22. }  

    4.accordionLayout

    Js代码  收藏代码
    1. /* 
    2.     创建accordion布局 
    3. */  
    4. function createAccordionPanel(){  
    5.     var obj = {  
    6.         title : '父面板',  
    7.         width : 600,  
    8.         height : 400,  
    9.         layout : 'accordion',//制作应用程度菜单式样式.  
    10.         items : [{  
    11.             title : '菜单1',  
    12.             items : [{  
    13.                 xtype : 'panel',  
    14.                 title : 'a',  
    15.             }]  
    16.         },{  
    17.             title : '菜单2',  
    18.             items : [{  
    19.                 xtype : 'panel',  
    20.                 title : 'a',  
    21.             },{  
    22.                 xtype : 'panel',  
    23.                 title : 'b',  
    24.             }]  
    25.         }]  
    26.     } ;  
    27.     //实例化父面板  
    28.     var mainPanel = new Ext.Panel(obj) ;  
    29.     //将父面板添加到id为columnId的标签上.  
    30.     mainPanel.render("accordionId") ;  
    31. }  

    5.anchorLayout

    Js代码  收藏代码
    1. /* 
    2.     创建anchor布局 
    3. */  
    4. function createAnchorPanel(){  
    5.     var obj = {  
    6.         title : '父面板',  
    7.         width : 600,  
    8.         height : 400,  
    9.         layout : 'anchor',// 好处1:可以让子元素的大小根据父元素的大小确定.  
    10.         items : [{  
    11.             title : '菜单1',  
    12.             anchor : '50% 30%'  //利用achor方式布局子元素.  
    13.             },{  
    14.             title : 'b',  
    15.             width : 50,  
    16.             height : 50  
    17.         }]  
    18.     } ;  
    19.     //实例化父面板  
    20.     var mainPanel = new Ext.Panel(obj) ;  
    21.     //将父面板添加到id为columnId的标签上.  
    22.     mainPanel.render("anchorId") ;  
    23. }  

    Ext.onReady方法如下:

    Js代码  收藏代码
    1. /* 
    2.     页面成功载入后会第一个调用此方法 
    3. */  
    4. Ext.onReady(function(){  
    5.     createColumnPanel() ;//创建column布局  
    6.     document.getElementById("columnId").style.display = 'none' ;//隐藏column布局  
    7.     createBorderPanel() ;//创建border布局  
    8.     document.getElementById("borderId").style.display = 'none' ;//隐藏border布局  
    9.     createFitPanel() ;//创建fit布局  
    10.     document.getElementById("fitId").style.display = 'none' ;//隐藏fitId布局  
    11.     createAccordionPanel() ;//创建accordion布局  
    12.     document.getElementById("accordionId").style.display = 'none' ;//隐藏accordion布局  
    13.     createAnchorPanel() ;//创建anchor布局  
    14. }) ;  
  • 相关阅读:
    泛型约束new()的使用
    控制反转-依赖注入
    微服务的六个基本点
    java反编译工具
    Idea中一些常用设置
    JSP内置对象(9个常用的内置对象)
    输出输入流，的应用
    流
    容器集合类
    容器与集合
  • 原文地址：https://www.cnblogs.com/holyes/p/ad4b97b8aee5d6027b960fd18238ae9a.html
Copyright © 2011-2022 走看看