- 面板控件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"><!--
- Ext.onReady(function(){
- Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
- var tabPanel = new Ext.TabPanel({
- height : 50,
- width : 300,
- autoTabs : true,//自动扫描页面中的div然后将其转换为标签页
- deferredRender : false,//不进行延时渲染
- activeTab : 0,//默认激活第一个tab页
- animScroll : true,//使用动画滚动效果
- enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
- applyTo : 'panel'
- });
- });
- // --></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 : '散步'
- }
- }
- ]
- }
- ]
- })
转载于:https://www.cnblogs.com/dullbaby/archive/2013/05/21/3090173.html