本篇講解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)的分析各種布局方式。
這種方式的布局可以對(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 }] });效果如下：
有的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); } });效果如下：
這個(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%' }] });效果如下：
這個(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 }] });效果如下：
這個(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]) }] });效果如下：
這個(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' }] }] });效果如下：
這個(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 }] });效果如下：
這個(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' } ] });效果如下：
這個(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 }] });效果如下：
跟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' }] });效果如下：
聯(lián)系客服
