Ext3.0 面板Ext.Panel

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.子项介绍

1. 按钮组
2. 一种基础性的tab容器。亦可将多个面板归纳为一组tabs
3. 可浮动，拖动，可关闭，调大调小的类window的特殊面板
4. 树状的数据结构提供了树状结构UI表示层
5. 表格面板
6. 表单面板
7. 提示面板

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:"
内部html
",
    contentEl:"panelContentEl",//内容显示位置在html后
        //这里是底部
    bbar:toolbar_b,
    buttons:[bt1,bt2],
    buttonAlign:"center",//按钮布局的配置 
        //其它配置
    frame:false,
    draggable:false,//拖动
    floating:false,//浮动
})

    
//panel要渲染的节点
    //定义在外面的html，用来给panel的contentEl使用
    

        外部html

        可以通过panel的contentEl属性:'对应html的id'

        就可以在panel外定义好html,然后渲染进来

        这块内容在panel的html自身html内容的后面
   

8.上图

panel_Run.jpg