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

你可能感兴趣的:(Ext3.0 面板Ext.Panel)