国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
Extjs布局

ExtJs4   layout 布局

本篇講解Ext另一個(gè)重要的概念:布局。一般的容器類(lèi)控件都是通過(guò)配置項(xiàng)items添加子控件的,這些子控件相對(duì)于父控件怎么定位呢,這里就要用到布局。某些容器類(lèi)控件,它本身默認(rèn)就集成了一種布局方式,例如比較典型的是:Ext.container.Viewport 布局控件,它其實(shí)就是一個(gè)border布局的容器,還有Ext.form.Panel、Ext.tab.Panel等。本節(jié)我們系統(tǒng)的分析各種布局方式。

一、absolute

這種方式的布局可以對(duì)子元素相對(duì)于父級(jí)容器控件進(jìn)行絕對(duì)定位,它包含了x、y兩個(gè)配置項(xiàng)用于定位。

我們來(lái)看看一個(gè)例子:

[Js]
    //absolute    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div1',        width: 400,        height: 300,        layout: 'absolute',        items: [{            title: '面板1',            xtype: "panel",            html: "子元素1",            width: 200,            height: 100,            x: 50,            y: 50        }, {            title: '面板2',            xtype: "panel",            html: "子元素2",            width: 200,            height: 100,            x: 100,            y: 80        }]    });

效果如下:

二、accordion

有的js插件里面accordion都是一個(gè)ui控件,但是Ext是通過(guò)布局的方式實(shí)現(xiàn)的,我們可以用面板控件作為它的折疊項(xiàng),并且還可以用js來(lái)翻動(dòng)活動(dòng)項(xiàng)。

[Js]
    //accordion    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div2',        width: 400,        height: 300,        layout: 'accordion',        items: [{            tools: [{ type: 'gear', handler: function () {                Ext.Msg.alert('提示', '配置按鈕被點(diǎn)擊。');            }            }, { type: 'refresh'}],            title: '面板1',            xtype: "panel",            html: "子元素1"        }, {            title: '面板2',            xtype: "panel",            html: "子元素2"        }, {            id: 'panel3',            title: '面板3',            xtype: "panel",            html: "子元素3"        }]    });    Ext.create("Ext.Button", {        renderTo: 'div2',        text: "打開(kāi)第三頁(yè)",        handler: function () {            Ext.getCmp('panel3').expand(true);        }    });

效果如下:

三、anchor

這個(gè)布局就是表單面板默認(rèn)支持的,每一項(xiàng)占據(jù)一行,支持用anchor配置項(xiàng)分配各個(gè)子項(xiàng)的高度和寬度。為百分比時(shí)表示當(dāng)前大小占父容器的百分比,為數(shù)字的時(shí)一般為負(fù)數(shù),表示父容器的值減去差值,剩下的為子項(xiàng)的大小。

[Js]
    //anchor    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div3',        width: 400,        height: 300,        layout: 'anchor',        items: [{            tools: [{ type: 'gear', handler: function () {                Ext.Msg.alert('提示', '配置按鈕被點(diǎn)擊。');            }            }, { type: 'refresh'}],            title: '面板1',            xtype: "panel",            html: "子元素1",            anchor: '80% 20%'        }, {            title: '面板2',            xtype: "panel",            html: "子元素2",            anchor: '-50 -200'        }, {            title: '面板3',            xtype: "panel",            html: "子元素3",            anchor: '100% 30%'        }]    });

效果如下:

四、border

這個(gè)布局可以定義東南西北四個(gè)方向的子元素,還有一個(gè)居中的子元素,一般用它來(lái)做頁(yè)面整頁(yè)布局,所以Ext.container.Viewport默認(rèn)就支持了這個(gè)布局方式。

[Js]
    //border    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div4',        width: 400,        height: 300,        layout: 'border',        defaults: {            split: true,                 //是否有分割線(xiàn)            collapsible: true,           //是否可以折疊            bodyStyle: 'padding:15px'        },        items: [{            region: 'north',            //子元素的方位:north、west、east、center、south            title: '北',            xtype: "panel",            html: "子元素1",            height: 70        }, {            region: 'west',            title: '西',            xtype: "panel",            html: "子元素2",            width: 100        }, {            region: 'east',            title: '東',            xtype: "panel",            html: "子元素2",            width: 100        }, {            region: 'center',            title: '主體',            xtype: "panel",            html: "子元素3"        }, {            region: 'south',            title: '南',            xtype: "panel",            html: "子元素4",            height: 70        }]    });

效果如下:

五、card

這個(gè)布局可以像卡片一樣的切換每個(gè)子元素,各個(gè)子元素都會(huì)獨(dú)占父元素的容器空間。我們可以定義翻頁(yè)按鈕來(lái)控制當(dāng)前處于活動(dòng)狀態(tài)的子元素。

[Js]
    //card    var cardNav = function (incr) {        var l = Ext.getCmp('cardPanel').getLayout();        var i = l.activeItem.id.split('card')[1];        var next = parseInt(i, 10) + incr;        l.setActiveItem(next);        Ext.getCmp('cardPrev').setDisabled(next === 0);        Ext.getCmp('cardNext').setDisabled(next === 2);    };    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div5',        width: 400,        height: 300,        layout: 'card',        activeItem: 1,                  //默認(rèn)活動(dòng)項(xiàng)        id: 'cardPanel',        items: [{            id: 'card0',            title: '面板1',            xtype: "panel",            html: "子元素1"        }, {            id: 'card1',            title: '面板2',            xtype: "panel",            html: "子元素2"        }, {            id: 'card2',            title: '面板3',            xtype: "panel",            html: "子元素3"        }],        bbar: ['->', {            id: 'cardPrev',            text: '? 前一頁(yè)',            handler: Ext.Function.bind(cardNav, this, [-1])        }, {            id: 'cardNext',            text: '后一頁(yè) ?',            handler: Ext.Function.bind(cardNav, this, [1])        }]    });

效果如下:

六、column

這個(gè)布局把子元素按照列進(jìn)行劃分。

[Js]
    //column    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div6',        width: 400,        height: 300,        layout: 'column',        defaults: {                     //設(shè)置沒(méi)一列的子元素的默認(rèn)配置            layout: 'anchor',            defaults: {                anchor: '100%'            }        },        items: [{            columnWidth: 4 / 10,        //設(shè)置列的寬度            items: [{                title: '面板1',                border: false,                html: '子元素1'            }, {                title: '面板2',                border: false,                html: '子元素2'            }]        }, {            width: 120,            items: [{                title: '面板3',                border: false,                html: '子元素3'            }]        }, {            columnWidth: .40,            items: [{                title: '面板4',                border: false,                html: '子元素4'            }]        }]    });

效果如下:

七、fit

這個(gè)布局下子元素會(huì)獨(dú)占全部的容器空間,一般用于只有一個(gè)子項(xiàng)的情況。

[Js]
    //fit    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div7',        width: 400,        height: 300,        layout: 'fit',        items: [{            title: '面板',            html: '子元素',            border: false        }]    });

效果如下:

八、table

這個(gè)布局用表格定位的方式去組織子元素,我們可以像表格一樣設(shè)置rowspan和colspan。

[Js]
    //table    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div8',        width: 400,        height: 300,        layout: {            type: 'table',            columns: 4        },        defaults: { frame: true, width: 70, height: 50 },        items: [            { html: '元素1', rowspan: 3, height: 150 },            { html: '元素2', rowspan: 2, height: 100 },            { html: '元素3' },            { html: '元素4' },            { html: '元素5', colspan: 2, width: 140 },            { html: '元素6' },            { html: '元素7' },            { html: '元素8' }        ]    });

效果如下:

九、vbox

這個(gè)布局把所有的子元素按照縱向排成一列。

[Js]
    //vbox    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div9',        width: 400,        height: 300,        layout: {            type: 'vbox',            pack: 'start',              //縱向?qū)R方式 start:從頂部;center:從中部;end:從底部            align: 'stretchmax'             //對(duì)齊方式 center、left、right:居中、左對(duì)齊、右對(duì)齊;stretch:延伸;stretchmax:以最大的元素為標(biāo)準(zhǔn)延伸        },        defaults: {            xtype: 'button'        },        items: [{            text: '小按鈕',            flex: 1                      //表示當(dāng)前子元素尺寸所占的均分的份數(shù)。        }, {            xtype: 'tbspacer',          //插入的空填充            flex: 3        },        {            text: '中按鈕',            scale: 'medium'        }, {            text: '大按鈕',            width: 120,            scale: 'large',            flex: 1        }]    });

效果如下:

十、hbox

跟vbox類(lèi)似,只不過(guò)變成了橫向的。

[Js]
    //hbox    Ext.create('Ext.Panel', {        title: '容器面板',        renderTo: 'div10',        width: 400,        height: 300,        layout: {            type: 'hbox',            pack: 'end',            align: 'middle'             //對(duì)齊方式 top、middle、bottom:頂對(duì)齊、居中、底對(duì)齊;stretch:延伸;stretchmax:以最大的元素為標(biāo)準(zhǔn)延伸        },        defaults: {            xtype: 'button'        },        items: [{            text: '小按鈕'        },{            text: '中按鈕',            scale: 'medium'        }, {            text: '大按鈕',            width: 120,            scale: 'large'        }]    });

效果如下:

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
ExtJs布局詳解
Ext 布局(layout)
Ext?Designer生成代碼的使用
Extjs
EXTJS Panel布局
ExtJs學(xué)習(xí)筆記基礎(chǔ)篇(2)-Ext組件的使用
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服