1.概念
一种特定功能和结构化组件
面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。
2.继承图
image
3.属性
头部
可选，Boolean ，True表示为显式建立头部元素，false则是跳过创建，title内容则不展示
可选，标题
可选，数组，工具按钮仅包含图标，逻辑要自定义,详情点击
可选，Ext.Toolbar的实例，面板顶部的工具条。
body主体区
body区 （除了自身这两个属性，可以添加内容到Body区。父类Container的
属性，也可以添加,并且在Body区最前端展示）
可选，一段HTML片段，或DomHelper配置项作为面板body内容
可选，用现有HTML节点的内容作为面板body的内容（缺省为''）。值为现有html元素的id值，内容显示在html属性随后
底部
可选，Ext.Toolbar的实例，面板底部的工具条。
可选，Ext.Button类型数组，在面板底部加入按钮
可选，在此面板上的按钮的对齐方式,'right,' 'left' and 'center'（默认为 'right')
添加其它项配置：
可选
可选，Boolean ，True表示为面板的边框外框可自定义的，false表示为边框可1px
可选，Boolean ，是否可拖动
可选，Boolean ，面板是否浮动
4.方法
返回面板顶部区域的工具条
返回面板底部区域的工具条
获取该面板的[Ext.Updater]主要是为面板的主体部分（body）提过面向Ajax的内容更新
可选，利用XHR的访问加载远程的内容，立即显示在面板中
设置面板的标题文本
5.事件
面板的标题有改动后触发
当面板被展开后触发
当面板被闭合后触发
当面板被闭合之前触发。若句柄返回false则取消闭合的动作
当面板被展开之前触发。若句柄返回false则取消展开的动作
当面板被关闭之前触发
当面板被关闭后触发
6.子项介绍
按钮组
一种基础性的tab容器。亦可将多个面板归纳为一组tabs
可浮动，拖动，可关闭，调大调小的类window的特殊面板
树状的数据结构提供了树状结构UI表示层
表格面板
表单面板
提示面板
7.Ext.Panel的使用代码
//toolbar
var toolbar_t= new Ext.Toolbar({
items:[['这个作为panel的tbar']]
})
var toolbar_b= new Ext.Toolbar({
items:[['这个作为panel的bbar']]
})
//创建按钮
var bt1=new Ext.Button({
text:"按钮1"
})
var bt2=new Ext.Button({
text:"按钮2"
})
//创建一个/*颜色选择器、日期选择器*/，添加到panel的item中,类型：基类是component即可
var colorPalette=new Ext.ColorPalette({})
var DatePicker=new Ext.DatePicker({})
//panel面板
var panel=new Ext.Panel({
//component属性
renderTo:"panel",
//Container容器属性
items:[colorPalette,DatePicker],//这块内容在Body区最前面
//panel属性
//这里是头部
header:true,//会增加一个额头,用来显示title。如果false。title内容不展示
title:"panel的title属性",//显示在header位置
tbar:toolbar_t,
//这里是内容区
html:"<div style='width:100px;height:100px;background:#ccc'>内部html</div>",
contentEl:"panelContentEl",//内容显示位置在html后
//这里是底部
bbar:toolbar_b,
buttons:[bt1,bt2],
buttonAlign:"center",//按钮布局的配置
//其它配置
frame:false,
draggable:false,//拖动
floating:false,//浮动
})
<body style="padding:20px">
<div id="panel"></div>//panel要渲染的节点
//定义在外面的html，用来给panel的contentEl使用
<div id="panelContentEl" style="border:1px solid red">
<span style="color:red">外部html</span></br>
可以通过panel的contentEl属性:'对应html的id'</br>
就可以在panel外定义好html,然后渲染进来</br>
<span style="color:blue">这块内容在panel的html自身html内容的后面</span>
</div>
</body>
8.上图
panel_Run.jpg
网友评论