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

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

[javascript] view
plaincopy

面板控件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 : '散步'

}

}

]

}

]

})