原文网址：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 : '散步'
}
}
]
}
]
})
相关推荐
### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前，我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**： - 类型：布尔类型（true 或 false） - 描述：此属性...
**TabPanel示例** - **TabPanel配置**: 通过设置`xtype`为`tabpanel`将面板转换为选项卡面板。 - **Items数组**: 用于添加子组件到容器，如`[ { xtype: 'panel', title: 'Tab 1', iconCls: 'fa-home' }, { xtype: '...
2. **布局管理**：ExtJS 提供了多种布局方式，如 `FitLayout`、`BorderLayout` 和 `CardLayout` 等，可以帮助开发者轻松地管理和调整界面布局。 3. **数据绑定**：ExtJS 支持数据绑定，可以方便地将数据模型与视图...
布局部分着重讲解了在ExtJS中如何对界面进行布局管理，包括各种布局类型如盒式布局、表格布局等，以适应不同的设计需求。 表格Grid部分介绍了ExtJS的网格组件Grid的创建、配置和数据绑定方法，Grid组件对于处理和...
在示例中，两个Panel组件被添加到Viewport中。 组件的类型通过xtype标识，如`Ext.panel.Panel`的xtype是'panel'。使用xtype配置时，子组件不会立即实例化，而是在需要时由容器动态创建，如TabPanel中的选项卡页面，...
此外，ExtJS还支持其他一些布局，如Anchor布局、Absolute布局等，以满足不同应用场景的需求。 ### 七、使用表格控件Grid #### 7.1 基本表格GridPanel GridPanel是用于显示表格数据的主要组件。它支持分页、排序、...
- **导航面板**：`navPanel`是一个位于西部区域的Panel，采用手风琴布局并包含两个Treepanel实例。 #### 视口配置 - **视口组件**：`var viewport = new Ext.Viewport({...});`定义了整个应用的视口布局，其中包含...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
- 在示例中，`viewport` 的布局有两种类型：`fit` 和 `border`。`fit` 布局适用于只有一个子组件的情况，它会使得子组件完全填充容器。而 `border` 布局则将容器分为五个区域：`north`, `south`, `east`, `west` 和...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
- **面板（Panel）**：提供了灵活的布局和内容管理功能，可以嵌套其他组件。 - **窗口（Ext.Window）**：用于创建弹出式的对话框或窗口，可以自定义标题、大小等属性。 - **布局（Layouts）**：包括CardLayout、...
- **Viewport**: 视口组件，代表着浏览器的可视区域，能够随着浏览器窗口的大小变化而自动调整其内部组件的布局。 - **MenuPanel**: 菜单面板，用于展示一系列可点击的菜单项，通常用于导航。 - **Tree**: 树形结构...