layout

1.面板
    (1)类结构
        Ext.Base
        Ext.AbstractComponent
            Ext.Component
                Ext.container.AbstractContainer
                    Ext.container.Container
                        Ext.panel.AbstractPanel
                            Ext.panel.Panel
    (2)常见子类
        Ext.window.Window
        Ext.form.panel  ---form的panel
        Ext.panel.Table ---grid的panel
        Ext.tab.Panel   ---标签页的panel
        Ext.menu.Menu
        Ext.tip.Tip
        Ext.container.ButtonGroup
    (3)组成面板的部件
           底部工具栏,顶部工具栏,面板头部,面板底部,面板体
           
2.布局
    (1) Auto自动布局(Ext.layout.container.Auto)
        默认为自动布局，采用布局布局的模式与HTML流式排版类似
    (2) Fit自适应布局(Ext.layout.container.Fit)
        面板里有且只有一个其它面板资源元素，并且填满整个body
    (3) Accordion折叠(即手风琴)布局(Ext.layout.container.Accordion)
        同时会初始化多个面板，当一个面板处于打开状态时，其它面板会处于收起状态
    (4) Card卡片布局(Ext.layout.container.Card)
        它和手风琴布局类似，也有多个面板；不同之处在于他用按钮来切换（常用于导航）
    (5) Anchor描点布局[Ext.layout.container.Anchor]
        根据容器的大小，自适应来为容器的子元素进行布局和定位
            A.百分比
            B.偏移量
            C.参考离边的距离定位
    (6)    多选框布局[Ext.layout.container.CheckboxGroup]
    (7) Column列布局[Ext.layout.container.Column]
        列风格的布局，每一列的宽度可以根据百分比或固定数据来控制
    (8) Table表格布局[Ext.layout.container.Table]
        和传统的HTML的Table布局方式一样，同样具有跨列，跨行的属性。
    (9) Absolute绝对布局[Ext.layout.container.Absolute]
        格局容器X、Y轴的方式绝对定位
    (10) Border边界布局[Ext.layout.container.Border]
         可以控制上、下、左、右、中 (通常用于页面框架的规划)
    (11) 盒子布局
         Ext.layout.container.Box
            Ext.layout.container.HBox 竖排
            Ext.layout.container.VBox 横排
         重要参数
            Box
                flex 具有配置flex的子项，会根据占有剩余总量的比值，来决定自己的大小
                pack 控制子元素展示的位置(start左面--这时候flex生效，center中间，end后面)
                padding 边距
            HBox
                align[top,middle,stretch,stretchmax]
            VBox
                align[left,center,stretch,stretchmax]
                
3.面板常用的配置属性
    Ext.panel.Panel
        (1) closable:true //启用关闭功能
        (2) closeAction:'destroy' //设置关闭窗口后的对象处理[destroy销毁面板|hide隐藏面板]
        (3) hideCollapsible:true  //启用面板隐藏面板体功能
        (4) collapsible:true      //是否展开面板体
        (5) 
4.Ext.tab.Panel标签页，一种特殊的布局方式
    常用方法
        setActiveTab( Ext.Component card) 设置当前显示的标签页