ExtJs布局管理
所有ExtJs的Layout Class都在API Documentation->Ext->Layout下,如果想用哪种而已方式可以直接查询API帮助文档.我写这篇文章的意思是把学习的时候做的笔记保留下了,为了以后使用方便.
下面列出的是一些常用的Layout.
layout.html页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ExtJs Layout Example</title><link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"></link><script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script><script type="text/javascript" src="../js/layout.js"></script></head><body> <div id="columnId"></div> <div id="borderId"></div> <div id="fitId"></div> <div id="accordionId"></div> <div id="anchorId"></div></body></html>
以下的代码都是放在..js/layout.js文件中的.
1.columnLayout
/* 创建column布局*/function createColumnPanel(){ var obj = { title : '父面板', width : 600, height : 400, layout : 'column',//一列一列的显示容器中的元素 items : [{ xtype : 'panel',//子元素中默认的显示类型为:panel.也可以根据需要换成button等. title : '页面1', columnWidth : 0.5,//以面板整体宽度大小的25%大小进行填充. height : 200,//高度为固定值. layout : 'column', items : [{ xtype : 'button', text : '按钮1', columnWidth : 0.5 },{ xtype : 'button', text : '按钮2', columnWidth : 0.5 }], html : '我是面板1' },{ title : '页面2', columnWidth : 0.5, height : 50, html : '我是面板2' }] } ; //实例化父面板 var mainPanel = new Ext.Panel(obj) ; //将父面板添加到id为columnId的标签上. mainPanel.render("columnId") ;}2.borderLayout
/* 创建border布局*/function createBorderPanel(){ var obj = { title : '父面板', width : 600, height : 400, layout : 'border',//以东南西北中的方式显示容器中的元素 items : [{ title: 'North Region', region: 'north', // 上 height : 50 },{ title: 'South Region', region: 'south', // 下 height: 50 },{ title: 'West Region', region:'west', // 左 split: true, //设置可以调整该panel的大小(宽度) collapsible: true, //设置该面板是否可以收缩 width: 50 },{ title: 'East Region', region: 'east', // 右 width : 50 },{ title: 'Center Region', region: 'center', // 中,此面板必须存在. layout: 'border', items: [{ title: 'west', region: 'west', width: '50%' },{ title: 'center', region: 'center', }] }] } ; //实例化父面板 var mainPanel = new Ext.Panel(obj) ; //将父面板添加到id为borderId的标签上. mainPanel.render("borderId") ;}?3.fitLayout
/* 创建fit布局*/function createFitPanel(){ var obj = { title : '父面板', width : 600, height : 400, layout : 'fit',//填满整个外部容器,只能看到一个子元素 items : [{ title : '页面1', html : '我是面板1' },{ title : '页面2', html : '我是面板2' }] } ; //实例化父面板 var mainPanel = new Ext.Panel(obj) ; //将父面板添加到id为columnId的标签上. mainPanel.render("fitId") ;}4.accordionLayout
/* 创建accordion布局*/function createAccordionPanel(){ var obj = { title : '父面板', width : 600, height : 400, layout : 'accordion',//制作应用程度菜单式样式. items : [{ title : '菜单1', items : [{ xtype : 'panel', title : 'a', }] },{ title : '菜单2', items : [{ xtype : 'panel', title : 'a', },{ xtype : 'panel', title : 'b', }] }] } ; //实例化父面板 var mainPanel = new Ext.Panel(obj) ; //将父面板添加到id为columnId的标签上. mainPanel.render("accordionId") ;}5.anchorLayout
/* 创建anchor布局*/function createAnchorPanel(){ var obj = { title : '父面板', width : 600, height : 400, layout : 'anchor',// 好处1:可以让子元素的大小根据父元素的大小确定. items : [{ title : '菜单1', anchor : '50% 30%' //利用achor方式布局子元素. },{ title : 'b', width : 50, height : 50 }] } ; //实例化父面板 var mainPanel = new Ext.Panel(obj) ; //将父面板添加到id为columnId的标签上. mainPanel.render("anchorId") ;}?
Ext.onReady方法如下:
/* 页面成功载入后会第一个调用此方法*/Ext.onReady(function(){ createColumnPanel() ;//创建column布局 document.getElementById("columnId").style.display = 'none' ;//隐藏column布局 createBorderPanel() ;//创建border布局 document.getElementById("borderId").style.display = 'none' ;//隐藏border布局 createFitPanel() ;//创建fit布局 document.getElementById("fitId").style.display = 'none' ;//隐藏fitId布局 createAccordionPanel() ;//创建accordion布局 document.getElementById("accordionId").style.display = 'none' ;//隐藏accordion布局 createAnchorPanel() ;//创建anchor布局}) ;??
?
?
?
?
?
?
?
?
?
?
?
?
?