ExtJS中layout的12种布局风格
2016-03-13 21:43
519 查看
· absolute 顾名思义,在容器内部,根据指定的坐标定位显示
layout: 'absolute', items:[{ title: 'Panel 1', x: 50, y: 50, html: 'Positioned at x:50, y:50' }]· accordion 这个是最容易记的,手风琴效果
<!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必须为字符串值
<!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中
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' }); //如果窗口第一次被打开时才创建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局 }); } win.show(button); }); }); </script> </head> <body> This is my HTML page. <br> <button id="show-btn">button</button> </body> </html>· card (Wizard)您可以使用一张卡片布局来创建您自己的自定义向导式界面。布局是一个标准的CardLayout底部工具栏,和开发人员必须提供导航功能,实现了向导的业务逻辑(参见代码基础。js)。
layout:'card', activeItem: 0, // index or id bbar: ['->', { id: 'card-prev', text: '« Previous' },{ id: 'card-next', text: 'Next »' }], items: [{ id: 'card-0', html: 'Step 1' },{ id: 'card-1', html: 'Step 2' },{ id: 'card-2', html: 'Step 3' }]· column 把整个容器看成一列,然后向容器放入子元素时
layout:'column', items: [{ title: 'Width = 25%', columnWidth: .25, html: 'Content' },{ title: 'Width = 75%', columnWidth: .75, html: 'Content' },{ title: 'Width = 250px', width: 250, html: 'Content' }]· fit 一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
layout:'fit', items: { title: 'Fit Panel', html: 'Content', border: false }· form 是一种专门用于管理表单中输入字段的布局
<!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 win = new Ext.Window({ title: "form Layout", height: 150, width: 230, plain: true, bodyStyle: 'padding:15px', items: { xtype: "form", labelWidth: 30, defaultType: "textfield", frame:true, items: [ { fieldLabel:"姓名", name:"username", allowBlank:false }, { fieldLabel:"呢称", name:"nickname" }, { fieldLabel: "生日", xtype:'datefield', name: "birthday", width:127 } ] } }); win.show(); }); </script> </head> <body> This is my HTML page. <br> </body> </html>· table 按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列
<!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( { renderTo:'paneldiv', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] }); }); </script> </head> <body> This is my HTML page. <br> <div id="paneldiv"><div> </body> </html>
VBox
布局,允许子元素的垂直和水平拉伸,就像集装箱布局与规模管理。layout: { type: 'vbox' align : 'stretch', pack : 'start', }, items: [ {html:'panel 1', flex:1}, {html:'panel 2', height:150}, {html:'panel 3', flex:2} ]
HBox
布局,允许子元素的垂直和水平拉伸,就像列布局,但垂直延伸项目。layout: { type: 'hbox', pack: 'start', align: 'stretch' }, items: [ {html:'panel 1', flex:1}, {html:'panel 2', width:150}, {html:'panel 3', flex:2} ]
相关文章推荐
- AJAX实现跨域的三种种方法(代理,JSONP,XHR2)
- NoClassDefFoundError: org/json/JSONException解决方法
- [RxJS] Basic DOM Rendering with Subscribe
- 快乐的JS正则表达式(开篇)
- JS基础知识
- VS2005编译PJSIP库
- [RxJS] Resubscribing to a Stream with Repeat
- JSON 数据的系统解析
- 初学JS的感谢
- JavaScript:NaN和Infinity
- javascript
- js简单交互动画,运动吧
- JavaScript深度克隆
- JavaScript异步加载:不只是Ajax
- JavaScript语言精粹(读书笔记)
- 四种参数传递的形式——URL,超链接,js,form表单
- JavaScript基础篇(一)— — 基础
- JSP与servlet之间的传值方式
- 11. jsp与servlet之间页面跳转及参数传递实例
- jsp页面间的传值方法