ExtJS之 标准布局类(针对于panel)

Fit自适应布局

使唯一的子元素充满父容器,如果父容器有两个或多个子元素,那么只显示第一个子元素(前提是没有设置 autoScroll: true属性)

ExtJS之 标准布局类(针对于panel)_第1张图片

Accordion布局(折叠布局)

ExtJS之 标准布局类(针对于panel)_第2张图片

代码:

                Ext.create('Ext.panel.Panel', {
                title: 'Accordion Layout',
                width: 300,
                height: 300,
                layout: 'accordion',         //设置为折叠布局
                defaults: {
                    // 应用于每个panel
                    bodyStyle: 'padding:15px'
                },
                layoutConfig: {
                  
                    titleCollapse: false,
                    animate: true,
                    activeOnTop: true
                },
                items: [{
                    title: 'Panel 1',
                    html: 'Panel content!'
                }, {
                    title: 'Panel 2',
                    html: 'Panel content!'
                }, {
                    title: 'Panel 3',
                    html: 'Panel content!'
                }],
                renderTo: Ext.getBody()
            });

Card布局(卡片式布局)

ExtJS之 标准布局类(针对于panel)_第3张图片点击 nextExtJS之 标准布局类(针对于panel)_第4张图片

代码:

var panel = Ext.create('Ext.panel.Panel', {
                title: 'Example Wizard',
                width: 300,
                height: 200,
                layout: 'card',     //设置panel的布局方式为 卡片式布局
                activeItem: 0, // 默认显示第一页
                bodyStyle: 'padding:15px',
                defaults: {
                    // 应用于每个面板
                    border: false
                },
                // 导航按钮
                bbar: [    //定义底部工具栏, 不写xtype,默认是 button
        {
            id: 'prev',
            text: 'Back',
            handler: navHandler


        },
        '->',
        {
            id: 'next',
            text: 'Next',
            handler: navHandler
        }],
                // 定义轮换的页面
                items: [{
                    id: 'card-0',    //为了给setActiveItem()提供索引到哪个页面
                    html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
                }, {
                    id: 'card-1',
                    html: '<p>Step 2 of 3</p>'
                }, {
                    id: 'card-2',
                    html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
                }],
                renderTo: Ext.getBody()
            });
            function navHandler(btn) {
                var index = Number(panel.layout.activeItem.id.substring(5));


                if (btn.text == 'Back') {
                    index -= 1;
                    if (index < 0) {
                        index = 0;
                    }
                    else {
                        btn.enable = true; ;
                    }

                }
                else {
                    index += 1;
                    if (index > 3) {
                        index = 3;
                    }

                }

                panel.layout.setActiveItem('card-' + index);
            }

Anchor锚点布局

分为三种,

1.百分比布局

2.偏移值布局

 

下面看三种布局样式

从左至右 分别为 1百分比布局,2偏移值布局

ExtJS之 标准布局类(针对于panel)_第5张图片  ExtJS之 标准布局类(针对于panel)_第6张图片

代码: 切换显示格式,只需修改items内的 anchor值即可


Ext.create('Ext.panel.Panel', {

    title: 'header',
    tbar: ['顶部工具栏'],
    bbar: ['底部工具栏'],
    height: 400,
    width: 300,
    frame: true,
    renderTo: document.body,
    bodyPadding: 5,
    layout: 'anchor',
    bodyStyle: 'background-color:#fff',
    defaults: {//设置默认属性
        // autoScroll: true,     //自动滚动条
        collapsible: true   //收缩拉伸按钮

    },
    //  autoScroll: true,     //自动滚动条
    collapsible: true,   //收缩拉伸按钮

    items: [{

        title: 'son panel1',
        //anchor:'30% 80%'   //第一个百分比是 宽度 ,第二个是高度
        anchor:'-100 -100'   // 设置子面板 相对于父面板 右下边的偏移值
    

    }

    ]


})

Absolute绝对定位布局

ExtJS之 标准布局类(针对于panel)_第7张图片

代码:

Ext.create('Ext.panel.Panel', {

               title: 'header',
               tbar: ['顶部工具栏'],
               bbar: ['底部工具栏'],
               height: 400,
               width: 300,
               frame: true,
               renderTo: document.body,
               bodyPadding: 5,
               layout: 'absolute',
               bodyStyle: 'background-color:#fff',
               defaults: {//设置默认属性
                   // autoScroll: true,     //自动滚动条
                   collapsible: true,   //收缩拉伸按钮
                   height: 50,
                   width: 100
               },
               //  autoScroll: true,     //自动滚动条
               collapsible: true,   //收缩拉伸按钮

               items: [{

                   title: 'son panel1',
                   x: 20,   //设置相对父容器 左边缘的距离值
                   y: 30    //这只相对父容器 上面元的距离值


               },
               {
                   title: 'son panel2',
                   x: 150,   //设置相对父容器 左边缘的距离值
                   y: 90 
               }

               ]


           })

Column列布局

意思就是 把容器 按指定列宽分割,来显示子元素,高度自适应,也可设置

列分割也分为两种形式: 估计宽度分割,百分比分割,下面示例演示两种形式

ExtJS之 标准布局类(针对于panel)_第8张图片

代码:

Ext.create('Ext.panel.Panel', {

                title: 'header',
                tbar: ['顶部工具栏'],
                bbar: ['底部工具栏'],
                height: 400,
                width: 300,
                frame: true,
                renderTo: document.body,
                bodyPadding: 5,
                layout: 'column',
                bodyStyle: 'background-color:#fff',
                defaults: {//设置默认属性
                    // autoScroll: true,     //自动滚动条
                    collapsible: true,   //收缩拉伸按钮
                    height: 50
                  //  width: 100
                },
                //  autoScroll: true,     //自动滚动条
                collapsible: true,   //收缩拉伸按钮

                items: [{

                  title:'son1',
                  width:100

                },
                {
                  title:'son2',
                  columnWidth:.3  
                  /*设置剩余宽度的30%,为什么说剩余宽度呢,那么就是
                   列布局是默认 固定布局宽度优先计算,百分比宽度的
                   算法是 总宽度减去固定宽度剩下的在做百分比分割
                   */
                },
                {
                title:'son3',
                columnWidth: .7
                }

                ]


            })

 

table表格布局

ExtJS之 标准布局类(针对于panel)_第9张图片

虽然称之为表格布局,但是 很清楚的看到 Div的存在,毫无table标记.

代码如下:

Ext.create('Ext.panel.Panel', {

              title: 'header',
              tbar: ['顶部工具栏'],
              bbar: ['底部工具栏'],
              height: 300,
              width: 300,
              frame: true,
              renderTo: document.body,
              bodyPadding: 5,
              layout: { type: 'table', columns: 2 },
              bodyStyle: 'background-color:#fff',
              defaults: {//设置默认属性
                  // autoScroll: true,     //自动滚动条
                  collapsible: true,   //收缩拉伸按钮
                  height: 50,
                  width: 120
              },
              //  autoScroll: true,     //自动滚动条
              collapsible: true,   //收缩拉伸按钮

              items: [{

                  title: 'son1',
                  width: 280,       //设置宽度
                  colspan: 2        //跨两列


              },
              {
                  title: 'son2',
                  width: 150,
                  rowspan: 2       //跨两行

              },
              {
                  title: 'son3'

              }

              ]


          })

box盒布局

主要用的属性就是 flex用来决定占父容器的百分比

ExtJS之 标准布局类(针对于panel)_第10张图片

代码如下:

Ext.create('Ext.panel.Panel', {

               title: 'header',
               tbar: ['顶部工具栏'],
               bbar: ['底部工具栏'],
               height: 200,
               width: 300,
               frame: true,
               renderTo: document.body,
               bodyPadding: 5,
               layout: 'fit',
               bodyStyle: 'background-color:#fff',
               layout:{
               type:'hbox',   //水平盒布局
               align:'stretch'   //子面板高度充满父容器
               },
               defaults: {//设置默认属性
                   // autoScroll: true,     //自动滚动条
                   collapsible: true   //收缩拉伸按钮

               },
               //  autoScroll: true,     //自动滚动条
               collapsible: true,   //收缩拉伸按钮

               items: [{

                   title: 'son panel1',
                  
                   flex:1                      //五分之一

               },
               {
                   title: 'son panel2',
                   flex:4                   //五分之四

               }

               ]


           })

 

ViewPort布局

结合 边框布局使用:

ExtJS之 标准布局类(针对于panel)_第11张图片

个人感觉:还是 这种简单易用,方便

代码:

Ext.create('Ext.panel.Panel', {

               title: 'header',
               tbar: ['顶部工具栏'],
               bbar: ['底部工具栏'],
               height: 200,
               width: 300,
               frame: true,
               renderTo: document.body,
               bodyPadding: 5,
               layout: 'fit',
               bodyStyle: 'background-color:#fff',
               layout: {
                   type: 'border',   //水平盒布局
                 
               },
               defaults: {//设置默认属性
                   // autoScroll: true,     //自动滚动条
                   collapsible: true   //收缩拉伸按钮

               },
               //  autoScroll: true,     //自动滚动条
               collapsible: true,   //收缩拉伸按钮

               items: [{

                   title: 'son panel1',

                   region:'north',
                   height:60

               },
               {
                   title: 'son panel2',
                  region:'west',
                  width:100

               },
               {
                   title:'son panel3',
                   region:'center'
                  
               }

               ]


           })

你可能感兴趣的:(ExtJs)