- /*
- 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>
原文地址:http://blog.csdn.net/lulu_jiang/article/details/5474370