ExtJS中layout的12种布局风格
Posted 风雪江山
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ExtJS中layout的12种布局风格相关的知识，希望对你有一定的参考价值。
原文地址： http://www.cnblogs.com/mingforyou/p/4119200.html
ExtJS中layout的12种布局风格extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。
另外几种见： http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html 里面有详细的例子。
· absolute 顾名思义，在容器内部，根据指定的坐标定位显示
This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.
Sample Config:
layout: \'absolute\', items:[{ title: \'Panel 1\', x: 50, y: 50, html: \'Positioned at x:50, y:50\' }]
· accordion 这个是最容易记的，手风琴效果
Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function(){ var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局 { renderTo:\'paneldiv\', title:\'容器组件\', layout:\'accordion\', width:500, height:200, layoutConfig:{animate:false}, items:[ {title:\'元素1\',html:\'\'}, {title:\'元素2\',html:\'\'}, {title:\'元素3\',html:\'\'}, {title:\'元素4\',html:\'\'} ] } ); }); </script> </head> <body> This is my HTML page. <br> <div id="paneldiv"></div> </body> </html>
· anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Provides anchoring of contained items to the container\'s edges. This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.
In this example, panels are anchored for example purposes so that you can easily see the effect. If you resize the browser window, the anchored panels will automatically resize to maintain the same relative dimensions.
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function() { var panel1 = new Ext.Panel({ title: "panel1", height: 100, anchor: \'-50\', html: "高度等于100，宽度=容器宽度-50" }); var panel2 = new Ext.Panel({ title: "panel2", height: 100, anchor: \'50%\', html: "高度等于100,宽度=容器宽度的50%" }); var panel3 = new Ext.Panel({ title: "panel3", anchor: \'-10, -250\', html: "宽度=容器宽度-10,高度=容器宽度-250" }); var win = new Ext.Window({ title: "Anchor Layout", height: 400, width: 400, plain: true, layout: \'anchor\', items: [panel1, panel2,panel3] }); win.show(); }); </script> </head> <body> This is my HTML page. <br> <div id="paneldiv"></div> </body> </html>
· border 将容器分为五个区域:east,south,west,north,center
This Layout Browser page is already a border layout, and this example shows a separate border layout nested within a region of the page\'s border layout. Border layouts can be nested with just about any level of complexity that you might need.
Every border layout must at least have a center region. All other regions are optional.
Sample Config:
layout:\'border\', defaults: { collapsible: true, split: true, bodyStyle: \'padding:15px\' }, items: [{ title: \'Footer\', region: \'south\', height: 150, minSize: 75, maxSize: 250, cmargins: \'5 0 0 0\' },{ title: \'Navigation\', region:\'west\', margins: \'5 0 0 0\', cmargins: \'5 5 0 0\', width: 175, minSize: 100, maxSize: 250 },{ title: \'Main Content\', collapsible: false, region:\'center\', margins: \'5 0 0 0\' }]
· card (TabPanel)
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function() { var button = Ext.get(\'show-btn\'); var win; button.on(\'click\', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: \'center\', //border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 margins: \'3 3 3 0\', activeTab: 0, defaults: { autoScroll: true }, items: [{ title: \'Bogus Tab\', html: "第一个Tab的内容." }, { title: \'Another Tab\', html: "我是另一个Tab" }, { title: \'Closable Tab\', html: "这是一个可以关闭的Tab", closable: true }] }); //定义一个Panel var nav = new Ext.Panel({ title: \'Navigation\', region: \'west\', //放在西边，即左侧 split: true, width: 200, collapsible: true, //允许伸缩 margins: \'3 0 3 3\', cmargins: \'3 3 3 3\' }); //如果窗以上是关于ExtJS中layout的12种布局风格的主要内容，如果未能解决你的问题，请参考以下文章
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。
另外几种见： http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html 里面有详细的例子。
· absolute 顾名思义，在容器内部，根据指定的坐标定位显示
This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.
Sample Config:
layout: \'absolute\', items:[{ title: \'Panel 1\', x: 50, y: 50, html: \'Positioned at x:50, y:50\' }]
· accordion 这个是最容易记的，手风琴效果
Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function(){ var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局 { renderTo:\'paneldiv\', title:\'容器组件\', layout:\'accordion\', width:500, height:200, layoutConfig:{animate:false}, items:[ {title:\'元素1\',html:\'\'}, {title:\'元素2\',html:\'\'}, {title:\'元素3\',html:\'\'}, {title:\'元素4\',html:\'\'} ] } ); }); </script> </head> <body> This is my HTML page. <br> <div id="paneldiv"></div> </body> </html>
· anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Provides anchoring of contained items to the container\'s edges. This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.
In this example, panels are anchored for example purposes so that you can easily see the effect. If you resize the browser window, the anchored panels will automatically resize to maintain the same relative dimensions.
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function() { var panel1 = new Ext.Panel({ title: "panel1", height: 100, anchor: \'-50\', html: "高度等于100，宽度=容器宽度-50" }); var panel2 = new Ext.Panel({ title: "panel2", height: 100, anchor: \'50%\', html: "高度等于100,宽度=容器宽度的50%" }); var panel3 = new Ext.Panel({ title: "panel3", anchor: \'-10, -250\', html: "宽度=容器宽度-10,高度=容器宽度-250" }); var win = new Ext.Window({ title: "Anchor Layout", height: 400, width: 400, plain: true, layout: \'anchor\', items: [panel1, panel2,panel3] }); win.show(); }); </script> </head> <body> This is my HTML page. <br> <div id="paneldiv"></div> </body> </html>
· border 将容器分为五个区域:east,south,west,north,center
This Layout Browser page is already a border layout, and this example shows a separate border layout nested within a region of the page\'s border layout. Border layouts can be nested with just about any level of complexity that you might need.
Every border layout must at least have a center region. All other regions are optional.
Sample Config:
layout:\'border\', defaults: { collapsible: true, split: true, bodyStyle: \'padding:15px\' }, items: [{ title: \'Footer\', region: \'south\', height: 150, minSize: 75, maxSize: 250, cmargins: \'5 0 0 0\' },{ title: \'Navigation\', region:\'west\', margins: \'5 0 0 0\', cmargins: \'5 5 0 0\', width: 175, minSize: 100, maxSize: 250 },{ title: \'Main Content\', collapsible: false, region:\'center\', margins: \'5 0 0 0\' }]
· card (TabPanel)
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件，底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript"> Ext.onReady(function() { var button = Ext.get(\'show-btn\'); var win; button.on(\'click\', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: \'center\', //border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 margins: \'3 3 3 0\', activeTab: 0, defaults: { autoScroll: true }, items: [{ title: \'Bogus Tab\', html: "第一个Tab的内容." }, { title: \'Another Tab\', html: "我是另一个Tab" }, { title: \'Closable Tab\', html: "这是一个可以关闭的Tab", closable: true }] }); //定义一个Panel var nav = new Ext.Panel({ title: \'Navigation\', region: \'west\', //放在西边，即左侧 split: true, width: 200, collapsible: true, //允许伸缩 margins: \'3 0 3 3\', cmargins: \'3 3 3 3\' }); //如果窗以上是关于ExtJS中layout的12种布局风格的主要内容，如果未能解决你的问题，请参考以下文章