原文网址：http://www.cnblogs.com/johan/archive/2011/04/11/1947982.html
面板控件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
(){
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 :
'散步'
}
}
]
}
]
})
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
