- Ext.create('Ext.panel.Panel',{
- title:'面板头部(header)',
- tbar : ['顶端工具栏(top toolbars)'],
- bbar : ['底端工具栏(bottom toolbars)'],
- height:200,
- collapsible : true,
- collapseDirection : 'left',
- width:300,
- frame:true,
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- bodyStyle:'background-color:#FFFFFF',
- html:'面板体(body)',
- tools : [
- {id:'toggle'},
- {id:'close'},
- {id:'maximize'}
- ],
- buttons:[{
- text:'面板底部(footer)'
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'面板头部(header)', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, collapsible : true, collapseDirection : 'left', width:300, frame:true, renderTo: Ext.getBody(), bodyPadding: 5, bodyStyle:'background-color:#FFFFFF', html:'面板体(body)', tools : [ {id:'toggle'}, {id:'close'}, {id:'maximize'} ], buttons:[{ text:'面板底部(footer)' }] });
面板加载远程页面:
- Ext.create('Ext.panel.Panel',{
- title:'面板加载远程页面',
- height:150,//设置面板的高度
- width:250,//设置面板的宽度
- frame:true,//渲染面板
- autoScroll : true,//自动显示滚动条
- collapsible : true,//允许展开和收缩
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- autoLoad :'page1.html',//自动加载面板体的默认连接
- bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
- });
Ext.create('Ext.panel.Panel',{ title:'面板加载远程页面', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 autoScroll : true,//自动显示滚动条 collapsible : true,//允许展开和收缩 renderTo: Ext.getBody(), bodyPadding: 5, autoLoad :'page1.html',//自动加载面板体的默认连接 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 });
面板加载本地资源:
- <HTML>
- <HEAD>
- <TITLE>面板加载本地资源</TITLE>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
- <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
- <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript">
- Ext.onReady(function(){
- Ext.create('Ext.panel.Panel',{
- title:'面板加载本地资源',
- height:150,//设置面板的高度
- width:250,//设置面板的宽度
- frame:true,//渲染面板
- collapsible : true,//允许展开和收缩
- autoScroll : true,//自动显示滚动条
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- contentEl :'localElement',//加载本地资源
- bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
- });
- });
- </script>
- </HEAD>
- <BODY STYLE="margin: 10px">
- <table border=1 id='localElement'>
- <tr><th colspan=2>本地资源---员工列表</th></tr>
- <tr>
- <th width = 60>序号</th><th width = 80>姓名</th>
- <tr>
- <tr><td>1</td><td>张三</td></tr>
- <tr><td>2</td><td>李四</td></tr>
- <tr><td>3</td><td>王五</td></tr>
- <tr><td>4</td><td>赵六</td></tr>
- <tr><td>5</td><td>陈七</td></tr>
- <tr><td>6</td><td>杨八</td></tr>
- <tr><td>7</td><td>刘九</td></tr>
- </table>
- </BODY>
- </HTML>
<HTML> <HEAD> <TITLE>面板加载本地资源</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'面板加载本地资源', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoScroll : true,//自动显示滚动条 renderTo: Ext.getBody(), bodyPadding: 5, contentEl :'localElement',//加载本地资源 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }); }); </script> </HEAD> <BODY STYLE="margin: 10px"> <table border=1 id='localElement'> <tr><th colspan=2>本地资源---员工列表</th></tr> <tr> <th width = 60>序号</th><th width = 80>姓名</th> <tr> <tr><td>1</td><td>张三</td></tr> <tr><td>2</td><td>李四</td></tr> <tr><td>3</td><td>王五</td></tr> <tr><td>4</td><td>赵六</td></tr> <tr><td>5</td><td>陈七</td></tr> <tr><td>6</td><td>杨八</td></tr> <tr><td>7</td><td>刘九</td></tr> </table> </BODY> </HTML>
使用html配置项自定义面板内容:
- var htmlArray = [
- '<table border=1>',
- '<tr><td colspan=2>员工列表</td></tr>',
- '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',
- '<tr><td>1</td><td>张三</td></tr>',
- '<tr><td>2</td><td>李四</td></tr>',
- '<tr><td>3</td><td>王五</td></tr>',
- '<tr><td>4</td><td>赵六</td></tr>',
- '<tr><td>5</td><td>陈七</td></tr>',
- '<tr><td>6</td><td>杨八</td></tr>',
- '<tr><td>7</td><td>刘九</td></tr>',
- '</table>'
- ];
- Ext.create('Ext.panel.Panel',{
- title:'使用html配置项自定义面板内容',
- height:150,//设置面板的高度
- width:250,//设置面板的宽度
- frame:true,//渲染面板
- collapsible : true,//允许展开和收缩
- autoScroll : true,//自动显示滚动条
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- html:htmlArray.join(''),
- bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
- });
var htmlArray = [ '<table border=1>', '<tr><td colspan=2>员工列表</td></tr>', '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>', '<tr><td>1</td><td>张三</td></tr>', '<tr><td>2</td><td>李四</td></tr>', '<tr><td>3</td><td>王五</td></tr>', '<tr><td>4</td><td>赵六</td></tr>', '<tr><td>5</td><td>陈七</td></tr>', '<tr><td>6</td><td>杨八</td></tr>', '<tr><td>7</td><td>刘九</td></tr>', '</table>' ]; Ext.create('Ext.panel.Panel',{ title:'使用html配置项自定义面板内容', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoScroll : true,//自动显示滚动条 renderTo: Ext.getBody(), bodyPadding: 5, html:htmlArray.join(''), bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 });
使用items配置项添加单一组件示例:
- Ext.create('Ext.panel.Panel',{
- title:'日历',
- frame:true,//渲染面板
- collapsible : true,//允许展开和收缩
- renderTo: Ext.getBody(),
- width : 200,
- bodyPadding: 5,
- items: [{//向面板中添加一个日期组件
- xtype: 'datepicker',
- minDate: new Date()
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'日历', frame:true,//渲染面板 collapsible : true,//允许展开和收缩 renderTo: Ext.getBody(), width : 200, bodyPadding: 5, items: [{//向面板中添加一个日期组件 xtype: 'datepicker', minDate: new Date() }] });
使用items配置项添加多个组件示例:
- <HTML>
- <HEAD>
- <TITLE>使用items配置项添加多个组件示例</TITLE>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
- <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
- <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript">
- Ext.onReady(function(){
- Ext.create('Ext.panel.Panel',{
- title:'使用items进行面板嵌套',
- frame:true,//渲染面板
- collapsible : true,//允许展开和收缩
- height : 200,
- width : 250,
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- layout : 'vbox',
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色
- collapsible : true,//允许展开和收缩
- width : 230,
- autoScroll : true//自动显示滚动条
- },
- items: [{
- title : '嵌套面板一',
- height : 80,//子面板高度为80
- contentEl : 'localElement'//加载本地资源
- },{
- title : '嵌套面板二',
- autoLoad : 'page1.html'//加载远程页面
- }]
- });
- });
- </script>
- </HEAD>
- <BODY STYLE="margin: 10px">
- <table border=1 id='localElement'>
- <tr><th colspan=2>本地资源---员工列表</th></tr>
- <tr>
- <th width = 60>序号</th><th width = 80>姓名</th>
- <tr>
- <tr><td>1</td><td>张三</td></tr>
- <tr><td>2</td><td>李四</td></tr>
- <tr><td>3</td><td>王五</td></tr>
- </table>
- </BODY>
- </HTML>
<HTML> <HEAD> <TITLE>使用items配置项添加多个组件示例</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'使用items进行面板嵌套', frame:true,//渲染面板 collapsible : true,//允许展开和收缩 height : 200, width : 250, renderTo: Ext.getBody(), bodyPadding: 5, layout : 'vbox', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色 collapsible : true,//允许展开和收缩 width : 230, autoScroll : true//自动显示滚动条 }, items: [{ title : '嵌套面板一', height : 80,//子面板高度为80 contentEl : 'localElement'//加载本地资源 },{ title : '嵌套面板二', autoLoad : 'page1.html'//加载远程页面 }] }); }); </script> </HEAD> <BODY STYLE="margin: 10px"> <table border=1 id='localElement'> <tr><th colspan=2>本地资源---员工列表</th></tr> <tr> <th width = 60>序号</th><th width = 80>姓名</th> <tr> <tr><td>1</td><td>张三</td></tr> <tr><td>2</td><td>李四</td></tr> <tr><td>3</td><td>王五</td></tr> </table> </BODY> </HTML>
Ext.layout.container.Auto布局示例:
- Ext.create('Ext.panel.Panel',{
- title:'Ext.layout.container.Auto布局示例',
- frame:true,//渲染面板
- width : 250,
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- layout : 'auto',//自动布局
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
- },
- //面板items配置项默认的xtype类型为panel,
- //该默认值可以通过defaultType配置项进行更改
- items: [{
- title : '嵌套面板一',
- html : '面板一'
- },{
- title : '嵌套面板二',
- html : '面板二'
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.Auto布局示例', frame:true,//渲染面板 width : 250, renderTo: Ext.getBody(), bodyPadding: 5, layout : 'auto',//自动布局 defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }, //面板items配置项默认的xtype类型为panel, //该默认值可以通过defaultType配置项进行更改 items: [{ title : '嵌套面板一', html : '面板一' },{ title : '嵌套面板二', html : '面板二' }] });
Ext.layout.container.Fit布局示例:
- Ext.create('Ext.panel.Panel',{
- layout : 'fit',
- title:'Ext.layout.container.Fit布局示例',
- frame:true,//渲染面板
- height : 150,
- width : 250,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
- },
- //面板items配置项默认的xtype类型为panel,
- //该默认值可以通过defaultType配置项进行更改
- items: [{
- title : '嵌套面板一',
- html : '面板一'
- },{
- title : '嵌套面板二',
- html : '面板二'
- }]
- })
Ext.create('Ext.panel.Panel',{ layout : 'fit', title:'Ext.layout.container.Fit布局示例', frame:true,//渲染面板 height : 150, width : 250, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }, //面板items配置项默认的xtype类型为panel, //该默认值可以通过defaultType配置项进行更改 items: [{ title : '嵌套面板一', html : '面板一' },{ title : '嵌套面板二', html : '面板二' }] })
Ext.layout.container.Accordion布局示例:
- Ext.create('Ext.panel.Panel',{
- layout:'accordion',
- title:'Ext.layout.container.Accordion布局示例',
- frame:true,//渲染面板
- height : 150,
- width : 250,
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- title : '嵌套面板一',
- html : '说明一'
- },{
- title : '嵌套面板二',
- html : '说明二'
- },{
- title : '嵌套面板三',
- html : '说明三'
- }]
- });
Ext.create('Ext.panel.Panel',{ layout:'accordion', title:'Ext.layout.container.Accordion布局示例', frame:true,//渲染面板 height : 150, width : 250, renderTo: Ext.getBody(), bodyPadding: 5, defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ title : '嵌套面板一', html : '说明一' },{ title : '嵌套面板二', html : '说明二' },{ title : '嵌套面板三', html : '说明三' }] });
Ext.layout.CardLayout布局示例:
- var panel = Ext.create('Ext.panel.Panel',{
- layout : 'card',
- activeItem : 0,//设置默认显示第一个子面板
- title:'Ext.layout.container.Card布局示例',
- frame:true,//渲染面板
- height : 150,
- width : 250,
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- title : '嵌套面板一',
- html : '说明一',
- id : 'p1'
- },{
- title : '嵌套面板二',
- html : '说明二',
- id : 'p2'
- },{
- title : '嵌套面板三',
- html : '说明三',
- id : 'p3'
- }],
- buttons:[{
- text : '上一页',
- handler : changePage
- },{
- text : '下一页',
- handler : changePage
- }]
- });
- //切换子面板
- function changePage(btn){
- var index = Number(panel.layout.activeItem.id.substring(1));
- if(btn.text == '上一页'){
- index -= 1;
- if(index < 1){
- index = 1;
- }
- }else{
- index += 1;
- if(index > 3){
- index = 3;
- }
- }
- panel.layout.setActiveItem('p'+index);
- }
var panel = Ext.create('Ext.panel.Panel',{ layout : 'card', activeItem : 0,//设置默认显示第一个子面板 title:'Ext.layout.container.Card布局示例', frame:true,//渲染面板 height : 150, width : 250, renderTo: Ext.getBody(), bodyPadding: 5, defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ title : '嵌套面板一', html : '说明一', id : 'p1' },{ title : '嵌套面板二', html : '说明二', id : 'p2' },{ title : '嵌套面板三', html : '说明三', id : 'p3' }], buttons:[{ text : '上一页', handler : changePage },{ text : '下一页', handler : changePage }] }); //切换子面板 function changePage(btn){ var index = Number(panel.layout.activeItem.id.substring(1)); if(btn.text == '上一页'){ index -= 1; if(index < 1){ index = 1; } }else{ index += 1; if(index > 3){ index = 3; } } panel.layout.setActiveItem('p'+index); }
百分比(Percentage)定位示例:
- Ext.create('Ext.panel.Panel',{
- layout : 'anchor',
- title:'Ext.layout.container.Anchor布局示例',
- frame:false,//渲染面板
- height : 150,
- width : 300,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- anchor : '50% 50%',//设置子面板的宽高为父面板的50%
- title : '子面板'
- }]
- });
Ext.create('Ext.panel.Panel',{ layout : 'anchor', title:'Ext.layout.container.Anchor布局示例', frame:false,//渲染面板 height : 150, width : 300, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ anchor : '50% 50%',//设置子面板的宽高为父面板的50% title : '子面板' }] });
偏移值(Offsets)定位:
- Ext.create('Ext.panel.Panel',{
- layout : 'anchor',
- title:'Ext.layout.container.Anchor布局示例',
- frame:false,//渲染面板
- height : 150,
- width : 300,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素
- title : '子面板'
- }]
- });
Ext.create('Ext.panel.Panel',{ layout : 'anchor', title:'Ext.layout.container.Anchor布局示例', frame:false,//渲染面板 height : 150, width : 300, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素 title : '子面板' }] });
参考边(Sides)定位:
- Ext.create('Ext.panel.Panel',{
- layout : 'anchor',
- title:'Ext.layout.container.Anchor布局示例',
- autoScroll : true,//自动显示滚动条
- frame:false,//渲染面板
- height : 150,
- width : 300,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
- width : 200,
- height : 100,
- title : '子面板'
- }]
- });
Ext.create('Ext.panel.Panel',{ layout : 'anchor', title:'Ext.layout.container.Anchor布局示例', autoScroll : true,//自动显示滚动条 frame:false,//渲染面板 height : 150, width : 300, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ anchor : 'r b',//相对于父容器的右边和底边的差值进行定位 width : 200, height : 100, title : '子面板' }] });
Ext.layout.container.Absolute布局示例:
- Ext.create('Ext.panel.Panel',{
- layout : 'absolute',
- title:'Ext.layout.container.Absolute布局示例',
- frame:false,//渲染面板
- height : 150,
- width : 300,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- frame : true,
- height : 70,
- width : 100,
- bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
- },
- items: [{
- x : 10,//横坐标为距父容器左边缘90像素的位置
- y : 10,//纵坐标为距父容器上边缘10像素的位置
- html : '子面板一',
- title : '子面板一'
- },{
- x : 130,//横坐标为距父容器左边缘130像素的位置
- y : 40,//纵坐标为距父容器上边缘40像素的位置
- html : '子面板二',
- title : '子面板二'
- }]
- });
Ext.create('Ext.panel.Panel',{ layout : 'absolute', title:'Ext.layout.container.Absolute布局示例', frame:false,//渲染面板 height : 150, width : 300, renderTo: Ext.getBody(), defaults : {//设置默认属性 frame : true, height : 70, width : 100, bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{ x : 10,//横坐标为距父容器左边缘90像素的位置 y : 10,//纵坐标为距父容器上边缘10像素的位置 html : '子面板一', title : '子面板一' },{ x : 130,//横坐标为距父容器左边缘130像素的位置 y : 40,//纵坐标为距父容器上边缘40像素的位置 html : '子面板二', title : '子面板二' }] });
指定固定列宽示例:
- Ext.create('Ext.panel.Panel',{
- title:'Ext.layout.container.Column布局示例',
- layout : 'column',
- frame:true,//渲染面板
- height : 150,
- width : 250,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
- height : 100,
- frame : true
- },
- items: [{
- title:'子面板一',
- width:100//指定列宽为100像素
- },{
- title:'子面板二',
- width:100//指定列宽为100像素
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.Column布局示例', layout : 'column', frame:true,//渲染面板 height : 150, width : 250, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 height : 100, frame : true }, items: [{ title:'子面板一', width:100//指定列宽为100像素 },{ title:'子面板二', width:100//指定列宽为100像素 }] });
使用百分比指定列宽:
- Ext.create('Ext.panel.Panel',{
- title:'Ext.layout.container.Column布局示例',
- layout : 'column',
- frame:true,//渲染面板
- height : 150,
- width : 250,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
- height : 100,
- frame : true
- },
- items: [{
- title:'子面板一',
- columnWidth:.3//指定列宽为容器宽度的30%
- },{
- title:'子面板二',
- columnWidth:.7//指定列宽为容器宽度的70%
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.Column布局示例', layout : 'column', frame:true,//渲染面板 height : 150, width : 250, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 height : 100, frame : true }, items: [{ title:'子面板一', columnWidth:.3//指定列宽为容器宽度的30% },{ title:'子面板二', columnWidth:.7//指定列宽为容器宽度的70% }] });
固定值与百分比结合使用:
- Ext.create('Ext.panel.Panel',{
- title:'Ext.layout.container.Column布局示例',
- layout : 'column',
- frame:true,//渲染面板
- height : 150,
- width : 350,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
- height : 100,
- frame : true
- },
- items: [{
- title:'子面板一',
- width : 100//指定列宽为100像素
- },{
- title:'子面板二',
- columnWidth:.3//指定列宽为容器剩余宽度的30%
- },{
- title:'子面板三',
- columnWidth:.7//指定列宽为容器剩余宽度的70%
- }]
- });
Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.Column布局示例', layout : 'column', frame:true,//渲染面板 height : 150, width : 350, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 height : 100, frame : true }, items: [{ title:'子面板一', width : 100//指定列宽为100像素 },{ title:'子面板二', columnWidth:.3//指定列宽为容器剩余宽度的30% },{ title:'子面板三', columnWidth:.7//指定列宽为容器剩余宽度的70% }] });
Ext.layout.container.Table布局示例:
- Ext.create('Ext.panel.Panel',{
- title:'Ext.layout.container.Table布局示例',
- layout : {
- type : 'table',//表格布局
- columns : 4 //设置表格布局默认列数为4列
- },
- frame:true,//渲染面板
- height : 150,
- width : 210,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
- frame : true,
- width : 50,
- height : 50
- },
- items: [{
- title:'子面板一',
- width : 150,
- colspan : 3//设置跨列
- },{
- title:'子面板二',
- rowspan : 2,//设置跨行
- height : 100
- },
- {title:'子面板三'},
- {title:'子面板四'},
- {title:'子面板五'}]
- });
Ext.create('Ext.panel.Panel',{ title:'Ext.layout.container.Table布局示例', layout : { type : 'table',//表格布局 columns : 4 //设置表格布局默认列数为4列 }, frame:true,//渲染面板 height : 150, width : 210, renderTo: Ext.getBody(), defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 frame : true, width : 50, height : 50 }, items: [{ title:'子面板一', width : 150, colspan : 3//设置跨列 },{ title:'子面板二', rowspan : 2,//设置跨行 height : 100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'}] });
Ext.layout.container.Border布局示例:
- Ext.create('Ext.panel.Panel',{
- title : 'Ext.layout.container.Border布局示例',
- layout:'border',//边框布局
- height : 250,
- width : 400,
- frame : true,
- renderTo: Ext.getBody(),
- defaults : {//设置默认属性
- collapsible : true
- },
- items: [{
- title: 'north Panel',
- html : '上边',
- region: 'north',//指定子面板所在区域为north
- height: 50
- },{
- title: 'South Panel',
- html : '下边',
- region: 'south',//指定子面板所在区域为south
- height: 50
- },{
- title: 'West Panel',
- html : '左边',
- region:'west',//指定子面板所在区域为west
- width: 100
- },{
- title: 'east Panel',
- frameHeader : true,
- frame : false,
- html : '右边',
- region:'east',//指定子面板所在区域为east
- width: 100
- },{
- title: 'Main Content',
- html : '中间',
- region:'center'//指定子面板所在区域为center
- }]
- });
Ext.create('Ext.panel.Panel',{ title : 'Ext.layout.container.Border布局示例', layout:'border',//边框布局 height : 250, width : 400, frame : true, renderTo: Ext.getBody(), defaults : {//设置默认属性 collapsible : true }, items: [{ title: 'north Panel', html : '上边', region: 'north',//指定子面板所在区域为north height: 50 },{ title: 'South Panel', html : '下边', region: 'south',//指定子面板所在区域为south height: 50 },{ title: 'West Panel', html : '左边', region:'west',//指定子面板所在区域为west width: 100 },{ title: 'east Panel', frameHeader : true, frame : false, html : '右边', region:'east',//指定子面板所在区域为east width: 100 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] });
Ext.layout.container.HBox布局示例:
- Ext.create('Ext.panel.Panel',{
- title : 'Ext.layout.container.HBox布局示例',
- layout:{
- type : 'hbox',//水平盒布局
- align : 'stretch'//子面板高度充满父容器
- },
- height : 150,
- width : 300,
- frame : true,
- renderTo: Ext.getBody(),
- items: [{
- title: '子面板一',
- flex : 1,
- html : '1/4宽(flex=1)'
- },{
- title: '子面板二',
- flex : 1,
- html : '1/4宽(flex=1)'
- },{
- title: '子面板三',
- flex : 2,
- html : '1/2宽(flex=2)'
- }]
- });
Ext.create('Ext.panel.Panel',{ title : 'Ext.layout.container.HBox布局示例', layout:{ type : 'hbox',//水平盒布局 align : 'stretch'//子面板高度充满父容器 }, height : 150, width : 300, frame : true, renderTo: Ext.getBody(), items: [{ title: '子面板一', flex : 1, html : '1/4宽(flex=1)' },{ title: '子面板二', flex : 1, html : '1/4宽(flex=1)' },{ title: '子面板三', flex : 2, html : '1/2宽(flex=2)' }] });
Ext.container.Viewport示例:
- Ext.create('Ext.container.Viewport',{
- layout:'border',//表格布局
- items: [{
- title: 'north Panel',
- html : '上边',
- region: 'north',//指定子面板所在区域为north
- height: 100
- },{
- title: 'West Panel',
- html : '左边',
- region:'west',//指定子面板所在区域为west
- width: 150
- },{
- title: 'Main Content',
- html : '中间',
- region:'center'//指定子面板所在区域为center
- }]
- });
Ext.create('Ext.container.Viewport',{ layout:'border',//表格布局 items: [{ title: 'north Panel', html : '上边', region: 'north',//指定子面板所在区域为north height: 100 },{ title: 'West Panel', html : '左边', region:'west',//指定子面板所在区域为west width: 150 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] });
Ext.tab.Panel示例:
- Ext.create('Ext.tab.Panel',{
- title : 'Ext.tab.Panel示例',
- frame : true,
- height : 150,
- width : 300,
- activeTab : 1,//默认激活第一个tab页
- renderTo: Ext.getBody(),
- items: [
- {title: 'tab标签页1',html : 'tab标签页1内容'},
- {title: 'tab标签页2',html : 'tab标签页2内容'},
- {title: 'tab标签页3',html : 'tab标签页3内容'},
- {title: 'tab标签页4',html : 'tab标签页4内容'},
- {title: 'tab标签页5',html : 'tab标签页5内容'}
- ]
- });
Ext.create('Ext.tab.Panel',{ title : 'Ext.tab.Panel示例', frame : true, height : 150, width : 300, activeTab : 1,//默认激活第一个tab页 renderTo: Ext.getBody(), items: [ {title: 'tab标签页1',html : 'tab标签页1内容'}, {title: 'tab标签页2',html : 'tab标签页2内容'}, {title: 'tab标签页3',html : 'tab标签页3内容'}, {title: 'tab标签页4',html : 'tab标签页4内容'}, {title: 'tab标签页5',html : 'tab标签页5内容'} ] });
Ext.tab.Panel示例(动态添加tab页):
- var tabPanel = Ext.create('Ext.tab.Panel',{
- title : 'Ext.tab.Panel示例(动态添加tab页)示例',
- frame : true,
- height : 150,
- width : 300,
- activeTab : 0,//默认激活第一个tab页
- renderTo: Ext.getBody(),
- items : [{
- title: 'tab标签页1',
- html : 'tab标签页1内容'
- }],
- buttons : [{
- text : '添加标签页',
- handler : addTabPage
- }]
- });
- function addTabPage(){
- var index = tabPanel.items.length + 1;
- var tabPage = tabPanel.add({//动态添加tab页
- title: 'tab标签页'+index,
- html : 'tab标签页'+index+'内容',
- closable : true//允许关闭
- })
- tabPanel.setActiveTab(tabPage);//设置当前tab页