/*
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:'<div>面板体(body)</div>',
tools:[
{id:'toggle'},
{id:'close'},
{id:'maximize'}
],
buttons:[
new Ext.Button({
text:'面板底部(footer)'
})
]
}
new Ext.Panel(config);
});
// --></mce:script> 通过面板加载内容的方式有：
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);
});
// --></mce:script> 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);
});
// --></mce:script> <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 = [
'<table>',
'<tr><td colspan="2">html配置自定义面板内容</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>',
'<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>'
];
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);
// --></mce:script>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);
});
// --></mce:script> 
扫一扫
4011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
