zoukankan      html  css  js  c++  java
  • extjs布局--只看现象

    layout,container中相当重要的属性,代表布局

    他是container的一个属性,其值隶属于Ext.layout.container下,都包含自己的对象,却全都不被建议显示构建(建议通过layout属性创建),虽然叫建议,不过。。。

    Ext.layout.container的基类是Ext.layout.Layout,这两个货全是方法的封装,并不包含渲染的代码,倒是包含诸如layout.setOwner(this);

    so。。。就算很蛋疼的实例话了layout,也无法丢到页面上去

    通过现象观察ext的布局(只看js对html的影响)

    fit

    fit:这个是一个布局的基类, 能使当容器只包含一个子元素时, 子元素自动填满容器

    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        layout:'fit',
        items:[{
            html:'a'
        },{
            html:'a'
        }]
    });
    <div class="x-container  x-container-default x-layout-fit x-border-box" id="container-1009">
        <div class="x-panel  x-fit-item x-panel-default" id="panel-1010" style="margin: 0px;  1595px; height: 19px;">
            <div id="panel-1010-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default" role="presentation" style=" 1595px; left: 0px; top: 0px; height: 19px;">
                <div id="panel-1010-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
                    <div id="panel-1010-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">a</div>
                </div>
            </div>
        </div>
        <div class="x-panel  x-fit-item x-panel-default" id="panel-1011" style="right: auto; left: 0px; top: 0px; margin: 0px;  1595px; height: 19px;">
            <div id="panel-1011-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default" role="presentation" style=" 1595px; left: 0px; top: 0px; height: 19px;">
                <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
                    <div id="panel-1011-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">a</div>
                </div>
            </div>
        </div>
    </div>

    其中   class="x-container x-container-default x-layout-fit x-border-box"  是container的封装,而x-layout-fit是fit布局的标签,items默认xtype是panel,且被打上了x-fit-item标签

    所以,container内包含两个  class="x-panel x-fit-item x-panel-default"  ,通过表现看到这两个都是可以显示的,并非只显示一个...

    other 呆毛:

    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        layout:'fit',
        items:[{
            html:'a'
        },{
            html:'a'
        }]
    });
    <div class="x-panel  x-panel-default x-border-box" id="panel-1009" style="height: 21px;">
        <div id="panel-1009-body" data-ref="body" class="x-panel-body x-panel-body-default x-layout-fit x-panel-body-default" role="presentation" style=" 1595px; left: 0px; top: 0px; height: 21px;">
            <div class="x-panel  x-fit-item x-panel-default" id="panel-1010" style="margin: 0px;  1593px; height: 19px;">
                <div id="panel-1010-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default" role="presentation" style=" 1593px; left: 0px; top: 0px; height: 19px;">
                    <div id="panel-1010-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
                        <div id="panel-1010-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">a</div>
                    </div>
                </div>
            </div>
            <div class="x-panel  x-fit-item x-panel-default" id="panel-1011" style="right: auto; left: 0px; top: 0px; margin: 0px;  1593px; height: 19px;">
                <div id="panel-1011-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default" role="presentation" style=" 1593px; left: 0px; top: 0px; height: 19px;">
                    <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
                        <div id="panel-1011-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">a</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    panel由  class="x-panel x-panel-default x-border-box" 封装,内部包含 class="x-panel-body x-panel-body-default x-layout-fit x-panel-body-default"  以代表主体,fit布局会讲其x-panel-body打上

    x-layout-fit标签,尽管items都是显示在html中,但真的只能看见第一个-.-

    相比于container,其panel标签被打上了内置样式。。。逻辑应该在渲染或者计算内,总之,无法计算container的高度,而后会通过内置样式,强制只显示第一个items

    column

        Ext.create('Ext.container.Container', {
            layout: 'column',
            renderTo: Ext.getBody(),
        });
    <div class="x-container  x-container-default x-column-layout-ct x-border-box" id="container-1009">
        <div id="container-1009-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
            <div id="container-1009-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation"></div>
        </div>
    </div>

    在容器内增加了{container}-ouertCt({container}-innerCt)

    {container}-ouertCt就是layout.column,增加的items将会至于innerCt内

    form

    业务划分,纵向布局,每一行宽度与容器相同

        Ext.create('Ext.container.Container', {
            layout: 'column',
            renderTo: Ext.getBody(),
        });
    <div class="x-container  x-container-default x-border-box" id="container-1009">
        <div id="container-1009-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
            <div id="container-1009-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">
                <div id="container-1009-formWrap" data-ref="formWrap" class="x-form-layout-wrap x-form-layout-auto-label">
                    <div class="x-form-layout-colgroup">
                        <div id="container-1009-labelColumn" data-ref="labelColumn" class="x-form-layout-column x-form-layout-label-column"></div>
                        <div class="x-form-layout-column"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    新增的items会至于container-1009-formWrap下,与x-form-layout-colgroup同级

     .x-form-layout-wrap 包含宽度100%,也算是与其他横向布局的区别吧

    absolute

    相对布局

    Ext.create('Ext.container.Container', {
        layout: 'absolute',
        renderTo: Ext.getBody()
    });
    <div class="x-container  x-container-default x-abs-layout-ct x-border-box" id="container-1009">
        <div id="container-1009-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style=" 100%; table-layout: fixed;">
            <div id="container-1009-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation"></div>
        </div>
    </div>

    看起来没有任何变化,加入items后,所有组建增加x-abs-layout-item标签-。-

    border

    border布局:标准的上下左右中布局方式

    Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
             400,
            height: 400,
            renderTo: Ext.getBody(),
            layout: "border",
            items: [{
                    region: "west",
                    title: 'west',
                    100
                }, {
                    region: "east",
                    title: 'east',
                    100
                }, {
                    region: "north",
                    title: 'north'
                }, {
                    region: "center",
                    title: 'center'
                }, {
                    region: "south",
                    title: "south"
                }
            ]
        });
    });

    accordion:手风琴

    Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
             400,
            height: 400,
            renderTo: Ext.getBody(),
            layout: "accordion",
            items: [{
                title: "a",
                html: "a"
            }, {
                title: "b",
                html: "b"
            }, {
                title: "c",
                html: "c"
            }]
        });
    });

     card:向导,向导需要一个事件进行翻页,这里用了两个容器组装为一个容器进行展示

    Ext.onReady(function() {
        var card = Ext.create('Ext.container.Container', {
             400,
            height: 400,
            layout: "card",
            items: [{
                html: '<h1>第一步</h1>'
            }, {
                html: '<h1>第二步</h1>'
            }, {
                html: '<h1>最后一步</h1>'
            }]
        });
        var button = Ext.create('Ext.container.Container', {
             400,
            height: 400,
            items: [{
                html: '<h1>上一步</h1>',
                listeners: {
                    click: {
                        element: 'el',
                        fn: function() {
                            card.getLayout()['prev']();
                        }
                    }
                }
            }, {
                html: '<h1>下一步<h1>',
                listeners: {
                    click: {
                        element: 'el',
                        fn: function() {
                            card.getLayout()['next']();
                        }
                    }
                }
            }]
        });
    
        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            items: [card, button]
        })
    });

    anchor:` 栅格`系统

    Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
            layout: 'anchor',
            items: [{
                html: '<h1>第一步</h1>',
                anchor: '50% 50%'
            }, {
                html: '<h1>第二步</h1>',
                anchor: '75% 75%'
            }, {
                html: '<h1>最后一步</h1>'
            }],
            renderTo: Ext.getBody(),
        });
    });

    absolute:绝对布局

    Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
            layout: 'absolute',
            items: [{
                 x: 10,
            y: 10,
                html: '<h1>第一步</h1>'
            }, {
                 x: 20,
            y: 20,
                html: '<h1>第二步</h1>'
            }, {
                 x: 30,
            y: 30,
                html: '<h1>最后一步</h1>'
            }],
            renderTo: Ext.getBody(),
        });
    });

    1.全部基于Ext.container.Container进行布局

    2.大多数时候只要修改layout属性就可以得到想要的布局

    3.每种布局都可能有专属的属性进行控制

    Ext.container.Containe
  • 相关阅读:
    POJ 1953 World Cup Noise
    POJ 1995 Raising Modulo Numbers (快速幂取余)
    poj 1256 Anagram
    POJ 1218 THE DRUNK JAILER
    POJ 1316 Self Numbers
    POJ 1663 Number Steps
    POJ 1664 放苹果
    如何查看DIV被设置什么CSS样式
    独行DIV自适应宽度布局CSS实例与扩大应用范围
    python 从入门到精通教程一:[1]Hello,world!
  • 原文地址:https://www.cnblogs.com/liuCy/p/4961731.html
Copyright © 2011-2022 走看看