Ext_面板_Ext.Panel

/* 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>