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.             width: 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.                 width: '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. }) ;  
posted @ 2012-06-26 10:14  holyes  阅读(142)  评论(0)  编辑  收藏  举报