extjs佈局－－只看現象

時間  2019-12-13
標籤 extjs 佈局 只看 現象 简体版
原文   原文鏈接

layout,container中至關重要的屬性，表明佈局html

他是container的一個屬性,其值隸屬於Ext.layout.container下,都包含本身的對象,卻全都不被建議顯示構建(建議經過layout屬性建立),雖然叫建議,不過。。。佈局

Ext.layout.container的基類是Ext.layout.Layout,這兩個貨全是方法的封裝,並不包含渲染的代碼,卻是包含諸如layout.setOwner(this);this

so。。。就算很蛋疼的實例話了layout,也沒法丟到頁面上去spa

經過現象觀察ext的佈局(只看js對html的影響)code

fit

fit:這個是一個佈局的基類, 能使當容器只包含一個子元素時, 子元素自動填滿容器orm

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標籤htm

因此,container內包含兩個  class="x-panel x-fit-item x-panel-default"  ,經過表現看到這兩個都是能夠顯示的,並不是只顯示一個...對象

other 呆毛:blog

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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程