EXTJS布局示例（panel，Viewport，TabPanel）

最新推荐文章于 2018-07-01 13:49:10 发布

原创最新推荐文章于 2018-07-01 13:49:10 发布 · 3.3w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #html #layout #border #autoload #class

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了EXTJS中多种布局的使用，包括Panel、Viewport、TabPanel等，涵盖了基本的布局方式如FitLayout、AccordionLayout、CardLayout、AnchorLayout、FormLayout、ColumnLayout、TableLayout以及BorderLayout。此外，还展示了如何将EXTJS布局应用于网页和TabPanel，包括动态添加Tab页和通过布局嵌套实现表单横排等实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面板控件panel应用 new Ext.Panel({ title:'面板头部（header）', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, width:300, frame:true, applyTo :'panel', bodyStyle:'background-color:#FFFFFF', html:'<div>面板体（body）</div>', tools : [ {id:'toggle'}, {id:'close'}, {id:'maximize'} ], buttons:[ new Ext.Button({ text:'面板底部（footer）' }) ] }) 面板panel加载远程页面 var panel = new Ext.Panel({ title:'面板加载远程页面', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 autoScroll : true,//自动显示滚动条 collapsible : true,//允许展开和收缩 applyTo :'panel', autoLoad :'page1.html',//自动加载面板体的默认连接 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }) 面板panel加载本地页面 var panel = new Ext.Panel({ title:'面板加载本地资源', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoScroll : true,//自动显示滚动条 autoHeight : false,//使用固定高度 //autoHeight : true,//使用自动高度 applyTo :'panel', contentEl :'localElement',//加载本地资源 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }) 本地资源 <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> 使用html配置项定义面板panel内容 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>' ]; var panel = new Ext.Panel({ title:'使用html配置项自定义面板内容', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoScroll : true,//自动显示滚动条 applyTo :'panel', html:htmlArray.join(''), bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }) 使用items添加panel内容 var panel = new Ext.Panel({ header : true, title:'日历', frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoHeight : true,//自动高度 width : 189,//固定宽度 applyTo :'panel', items: new Ext.DatePicker()//向面板中添加一个日期组件 }) 面板panel嵌套的使用 var panel = new Ext.Panel({ header : true, title:'使用items进行面板嵌套', frame:true,//渲染面板 collapsible : true,//允许展开和收缩 height : 200, width : 250, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色 height : 80,//子面板高度为80 collapsible : true,//允许展开和收缩 autoScroll : true//自动显示滚动条 }, items: [ new Ext.Panel({ title : '嵌套面板一', contentEl : 'localElement'//加载本地资源 }), new Ext.Panel({ title : '嵌套面板二', autoLoad : 'page1.html'//加载远程页面 }) ] }) FitLayout布局panel var panel = new Ext.Panel({ layout : 'fit', title:'Ext.layout.FitLayout布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }, //面板items配置项默认的xtype类型为panel， //该默认值可以通过defaultType配置项进行更改 items: [ { title : '嵌套面板一', html : '面板一' }, { title : '嵌套面板二', html : '面板二' } ] }) layout.Accordion布局panel var panel = new Ext.Panel({ layout : 'accordion', layoutConfig : { activeOnTop : true,//设置打开的子面板置顶 fill : true,//子面板充满父面板的剩余空间 hideCollapseTool: false,//显示“展开收缩”按钮 titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板 animate:true//使用动画效果 }, title:'Ext.layout.Accordion布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [ { title : '嵌套面板一', html : '说明一' }, { title : '嵌套面板二', html : '说明二' } , { title : '嵌套面板三', html : '说明三' } ] }) layout.CardLayout布局panel var panel = new Ext.Panel({ layout : 'card', activeItem : 0,//设置默认显示第一个子面板 title:'Ext.layout.CardLayout布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel', 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); } layout.AnchorLayout布局panel var panel = new Ext.Panel({ layout : 'anchor', title:'Ext.layout.AnchorLayout布局示例', frame:false,//渲染面板 height : 150, width : 300, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [ { anchor : '50% 50%',//设置子面板的宽高为父面板的50% title : '子面板' } ] }) 或者： items: [ { anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素 title : '子面板' } ] 或者： items: [ { anchor : 'r b',//相对于父容器的右边和底边的差值进行定位 width : 200, height : 100, title : '子面板' } ] 或者： items: [ { x : '10%',//横坐标为距父容器宽度10%的位置 y : 10,//纵坐标为距父容器上边缘10像素的位置 width : 100, height : 50, title : '子面板一' }, { x : 90,//横坐标为距父容器左边缘90像素的位置 y : 70,//纵坐标为距父容器上边缘70像素的位置 width : 100, height : 50, title : '子面板二' } ] layout.FormLayout布局panel var panel = new Ext.Panel({ title:'Ext.layout.FormLayout布局示例', layout : 'form', labelSeparator : '：',//在容器中指定分隔符 frame:true,//渲染面板 height : 110, width : 300, applyTo :'panel', defaultType: 'textfield',//指定容器子元素默认的xtype类型为textfield defaults : {//设置默认属性 msgTarget: 'side'//指定默认的错误信息提示方式 }, items: [ { fieldLabel:'用户名', allowBlank : false }, { fieldLabel:'密码', allowBlank : false } ] }) layout.ColumnLayout布局panel var panel = new Ext.Panel({ title:'Ext.layout.ColumnLayout布局示例', layout : 'column', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 frame : true }, items: [ { title:'子面板一', width:100,//指定列宽为100像素 height : 100 }, { title:'子面板二', width:100,//指定列宽为100像素 height : 100 } ] }) 或者： items: [ { title:'子面板一', columnWidth:.3,//指定列宽为容器宽度的30% height : 100 }, { title:'子面板二', columnWidth:.7,//指定列宽为容器宽度的70% height : 100 } ] 或者： items: [ { title:'子面板一', width : 100,//指定列宽为100像素 height : 100 }, { title:'子面板二', width : 100, columnWidth:.3,//指定列宽为容器剩余宽度的30% height : 100 }, { title:'子面板三', columnWidth:.7,//指定列宽为容器剩余宽度的70% height : 100 } ] layout.TableLayout布局panel var panel = new Ext.Panel({ title:'Ext.layout.TableLayout布局示例', layout : 'table', layoutConfig : { columns : 4 //设置表格布局默认列数为4列 }, frame:true,//渲染面板 height : 150, applyTo :'panel', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 frame : true, height : 50 }, items: [ { title:'子面板一', colspan : 3//设置跨列 }, { title:'子面板二', rowspan : 2,//设置跨行 height : 100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] }) layout.BorderLayout布局panel var panel = new Ext.Panel({ title : 'Ext.layout.BorderLayout布局示例', layout:'border',//表格布局 height : 250, width : 400, applyTo : 'panel', 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', html : '右边', region:'east',//指定子面板所在区域为east width: 100 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] }); Ext.Viewport布局示例 new Ext.Viewport({ title : 'Ext.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.TabPanel 标签页示例 var tabPanel = new Ext.TabPanel({ height : 150, width : 300, activeTab : 0,//默认激活第一个tab页 animScroll : true,//使用动画滚动效果 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 applyTo : 'panel', 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.TabPanel(转换div)示例 <mce:script type="text/javascript"></mce:script> </HEAD> <BODY> <table width = 100%> <tr><td> <td></tr> <tr><td width=100></td><td> <div id='panel'> <div class='x-tab' title='tab标签页1'>tab标签页1内容</div> <div class='x-tab' title='tab标签页2'>tab标签页2内容</div> <div class='x-tab' title='tab标签页3'>tab标签页3内容</div> <div class='x-tab' title='tab标签页4'>tab标签页4内容</div> <div class='x-tab' title='tab标签页5'>tab标签页5内容</div> </div> <div class='x-tab' title='tab标签页6'>tab标签页6内容</div> <td></tr> </table> </BODY> </HTML> Ext.TabPanel示例（动态添加tab页） var tabPanel = new Ext.TabPanel({ height : 150, width : 300, activeTab : 0,//默认激活第一个tab页 animScroll : true,//使用动画滚动效果 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 applyTo : 'panel', resizeTabs : true, tabMargin : 50, tabWidth : 100, 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页 } 布局嵌套实现表单横排 var form = new Ext.form.FormPanel({ title:'通过布局嵌套实现表单横排', labelSeparator :'：',//分隔符 labelWidth : 50,//标签宽度 bodyStyle:'padding:5 5 5 5',//表单边距 frame : false, height:150, width:250, applyTo :'form', items:[ { xtype : 'panel', layout : 'column',//嵌套列布局 border : false,//不显示边框 defaults : {//应用到每一个子元素上的配置 border : false,//不显示边框 layout : 'form',//在列布局中嵌套form布局 columnWidth : .5//列宽 }, items : [ { labelSeparator :'：',//分隔符 items : { xtype : 'radio', name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '男' } }, { items : { xtype : 'radio', name : 'sex',//名字相同的单选框会作为一组 hideLabel:true,//横排后隐藏标签 boxLabel : '女' } } ] }, { xtype : 'panel', layout : 'column',//嵌套列布局 border : false,//不显示边框 defaults : {//应用到每一个子元素上的配置 border : false,//不显示边框 layout : 'form',//在列布局中嵌套form布局 columnWidth : .5//列宽 }, items : [ { labelSeparator :'：',//分隔符 items : { xtype : 'checkbox', name : 'swim', fieldLabel:'爱好', boxLabel : '游泳' } }, { items : { xtype : 'checkbox', name : 'walk', hideLabel:true,//横排后隐藏标签 boxLabel : '散步' } } ] } ] })