- /*
-
Ext.Panel主要配置表:
-
animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false
-
applyTo Mixed 面板定位
-
autoDestroy Boolean 是否自动销毁从容器中移除组件(默认true)
-
autoHeight Boolean 是否自动高度(默认false)
-
autoLoad Object/String/Function 设置面板自动加载的url
-
autoScroll Boolean 设置是否自动加载滚动条(默认false自动加滚动条)
-
autoShow Boolean 是否移除组件的隐藏样式(默认flase)
-
autoWidth Boolean 是否自动宽度(默认false)
-
baseCls String 面板的基本样式类(默认x-panel)
-
bbar Object/Array 设置面板底端工具栏,可是Ext.Toolbar,工具栏配置对象,button的数组
-
bodyBorder Boolean 是否显示面板体内部边框(默认true,在border=true生效)
-
bodyStyle String/Object/Function 应用于面板体的自定义样式(默认null)
-
border Boolean 是否显示面板体边框(默认true,2px)
-
buttonAlign String 设置面板底部按钮对齐方式(默认right,可为left,center)
-
buttons Arry 设置面板底部按钮配置数组
-
collapseFirst Boolean 该项决定展开收缩按钮的位置(默认true)
-
collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态(默认true)
-
collapsible Boolean 是否允许面板展开收缩(默认false)
-
contentEI String 设置面板的内容元素,可为页面元素id,已存在的HTML节点
-
defaultType String 面板中元素的默认类型(默认panel)
-
defaults Object 应用到面板容器中所有元素配置对象,如:defaults:{bodyStyle:'padding:15px'}
-
floating Boolean 设置面板是否可浮动(默认true,会导致面板显示负偏移,位置要明确设置!)
-
footer Boolean 设置是否创建面板底部元素(默认true)
-
frame Boolean 设置是否渲染面板
-
header Boolean 设置是否创建头部(默认true)
-
headerAsText Boolean 是否在面板header中显示title(默认true)
-
height Number 面板高度(默认auto)
-
hideBorders Boolean true隐藏面板中所有元素的边框,false据组件具体配置
-
hideCollapseTool Boolean 设置当collapsible为true是,是否显示展开收缩按钮
-
html String/Object 设置面板元素内容为HTML片段或DomHelper生成内容
-
items Mixed 单独一个子组件或子组件数组
-
layout String 面板布局类型(默认Ext.layout.ContainerLayout布局)
-
layoutConfig Object 这个配置对象包含被选布局的配置项
-
maskDisabled Boolean 设置当面板不可使用时是否遮罩面目(默认true)
-
shadow Boolean/String 设置是否在面板后显示阴影(默认true)
-
shadowOffset Number 设置面板阴影偏移量(默认4)
-
tbar Object/Array 设置面板顶端工具栏,可是Ext.Toolbar,工具栏配置对象,button配置对象数组,面板
-
渲染后只能通过getTopToolbar方法访问该工具栏
-
title String 显示在面板的头部标题信息
-
titleCollapse Boolean 设置是否允许单击面板头部进行展开收缩(默认false)
-
tools Array 面板头部工具按钮配置对象数组
-
width Number 面板宽度(默认auto)
-
-
tools配置表:
-
id String 必选
-
handler Function 单击按钮后出发的处理函数
-
scope Object 处理函数执行范围
-
qtip String/Object 为按钮指定提示信息
-
hidden Boolean 设置初次渲染是否隐藏
-
on Object 为按钮配置事件监听
-
-
tools配置项id对应不同按钮
-
*/
- <mce:script type="text/javascript"><!--
-
Ext.onReady(function(){
-
var config = {
-
title:'面板头部(hear)',
-
tbar:['顶端工具栏(top toolbars)'],
-
bbar:['底端工具栏(bottom toolbars)'],
-
height:200,
-
width:300,
-
frame:true,
-
renderTo:'panel',
-
bodyStyle:'background-color:#ffffff',
-
html:'
面板体(body)
',
-
tools:[
-
{id:'toggle'},
-
{id:'close'},
-
{id:'maximize'}
-
],
-
buttons:[
-
new Ext.Button({
-
text:'面板底部(footer)'
-
})
-
]
-
}
-
-
new Ext.Panel(config);
-
});
-
通过面板加载内容的方式有:
1.通过autoLoad加载远程页面
- <mce:script type="text/javascript"><!--
-
/*
-
使用autoLoad加载远程页面
-
*/
-
-
Ext.onReady(function(){
-
var config = {
-
title:'面板加载远程页面',
-
height:150,
-
width:250,
-
frame:true,
-
autoScroll:true,
-
collapsible:true, //允许展开和收缩
-
applyTo:'panel',
-
autoLoad:{url:'page1.html'}, //自动加载面板体的链接
-
bodyStyle:'background-color:#ffffff'
-
}
-
-
var panel = new Ext.Panel(config);
-
});
-
2.通过contentEl加载本地资源
- <mce:script type="text/javascript"><!--
-
/*
-
contentEI加载本地资源
-
*/
-
-
Ext.onReady(function(){
-
var config = {
-
title:'面板加载本地数据',
-
height:150,
-
width:250,
-
frame:true,
-
collapsible:true,
-
autoScroll:true,
-
autoHeight:false,
-
//autoHeight:true,
-
renderTo:'panel',
-
contentEl:'localElement', //要加载的本地资源的id,contentEl中l为小写的L!
-
bodyStyle:'background-color:#ffffff'
-
}
-
-
new Ext.Panel(config);
-
});
-
- <table id='localElement'>
-
<tr>
-
<td colspan="2">远程页面</td>
-
</tr>
-
<tr>
-
<td width="60">编号</td>
-
<td width="80">姓名</td>
-
</tr>
-
<tr>
-
<td>编号</td>
-
<td>姓名</td>
-
</tr>
-
<tr>
-
<td>编号</td>
-
<td>姓名</td>
-
</tr>
-
<tr>
-
<td>编号</td>
-
<td>姓名</td>
-
</tr>
-
<tr>
-
<td>编号</td>
-
<td>姓名</td>
-
</tr>
-
</table>
3.通过html配置自定义面板内容
- <mce:script type="text/javascript"><!--
-
var htmlArray = [
-
'
',
-
'
html配置自定义面板内容 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
编号 | 姓名 |
',
-
'
'
-
];
-
-
var config = {
-
title:'使用html配置自定义面板内容', //panel标题
-
height:150, //panel高
-
width:250, //panel宽
-
frame:true, //渲染
-
collapsible:true, //允许展开收缩
-
autoScroll:true, //允许显示滚动条
-
autoHeight:false, //使用固定高度
-
//autoHeight:true, //自适应高度
-
renderTo:'panel', //定位
-
html:htmlArray.join(''), //panel中显示的自定义html代码
-
bodyStyle:'background-color:#ffffff' //panel背景色
-
}
-
-
var panel = new Ext.Panel(config);
-
4.通过items配置在面板中添加组件
- <mce:script type="text/javascript"><!--
-
/*
-
使用items配置在面板中添加组件
-
*/
-
-
/*使用items配置添加单一组件实例*/
-
Ext.onReady(function(){
-
var config = {
-
headler:true, //面板头部
-
title:'日历', //面板标题
-
frame:true, //渲染
-
collapsible:true, //允许伸展收缩
-
autoHeight:true, //允许自动高度
-
width:189, //面板固宽度
-
renderTo:'panel', //面板定位
-
items:new Ext.DatePicker() //向面板中添加一日期组件
-
}
-
-
var panel = new Ext.Panel(config);
-
});
-
-
/*使用items配置添加多个组件实例*/
-
Ext.onReady(function(){
-
var config = {
-
headler:true,
-
title:'使用items配置添加多个组件',
-
frame:true,
-
height:200,
-
width:250,
-
renderTo:'panel',
-
//设置所有面板的默认属性
-
defaults:{
-
bodyStyle:'background-color:#ffffff', //背景色
-
height:80, //面板固定高度
-
collapsible:true, //允许伸展收缩
-
autoScroll:true //自动显示滚动条
-
},
-
//面板元素数组
-
items:[
-
//嵌套面板一
-
new Ext.Panel({
-
title:'嵌套面板一',
-
contentEl:'localElement' //加载本地数据
-
}),
-
new Ext.Panel({
-
title:'嵌套面板而',
-
autoLoad:'page1.html' //加载远程页面(失败)
-
})
-
]
-
}
-
-
var panel = new Ext.Panel(config);
-
});
-
摘自: http://blog.csdn.net/lulu_jiang/article/details/5474370
阅读(10950) | 评论(0) | 转发(1) |