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; width: 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="width: 1595px; left: 0px; top: 0px; height: 19px;">
            <div id="panel-1010-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 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; width: 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="width: 1595px; left: 0px; top: 0px; height: 19px;">
            <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 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="width: 1595px; left: 0px; top: 0px; height: 21px;">
        <div class="x-panel  x-fit-item x-panel-default" id="panel-1010" style="margin: 0px; width: 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="width: 1593px; left: 0px; top: 0px; height: 19px;">
                <div id="panel-1010-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 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; width: 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="width: 1593px; left: 0px; top: 0px; height: 19px;">
                <div id="panel-1011-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 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="width: 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="width: 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="width: 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', {
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        layout: "border",
        items: [{
                region: "west",
                title: 'west',
                width:100
            }, {
                region: "east",
                title: 'east',
                width:100
            }, {
                region: "north",
                title: 'north'
            }, {
                region: "center",
                title: 'center'
            }, {
                region: "south",
                title: "south"
            }
        ]
    });
});

 

accordion:手风琴

 

 

Ext.onReady(function() {
    Ext.create('Ext.container.Container', {
        width: 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', {
        width: 400,
        height: 400,
        layout: "card",
        items: [{
            html: '<h1>第一步</h1>'
        }, {
            html: '<h1>第二步</h1>'
        }, {
            html: '<h1>最后一步</h1>'
        }]
    });
    var button = Ext.create('Ext.container.Container', {
        width: 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