快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

葡京娱乐官网下载安装:ExtJs4 笔记(14) layout 布局BR一、absolute



本篇解说Ext另一个紧张的观点:结构。一样平常的容器类控件都是经由过程设置设置设备摆设摆设项items添加子控件的,这些子控件相对付父控件怎么定位呢,这里就要用到结构。某些容器类控件,它本身默认就集成了一种结构要领,例如对照范例的是:Ext.container.Viewport 结构控件,它着实便是一个border结构的容器,还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的阐发各类结构要领。

一、absolute

这种要领的结构可以对子元素相对付父级容器控件进行绝对定位,它包孕了x、y两个设置设置设备摆设摆设项用于定位。

我们来看看一个例子:

[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都是一个ui控件,然则Ext是经由过程结构的要领实现的,我们可以用面板控件作为它的折叠项葡京娱乐官网下载安装,并且还可以用js来翻动活动项。

[Js]

//accordion

Ext.create('Ext.Panel', {

title: '容器面板',

renderTo: 'div2',

width: 400,

height: 300,

layout: 'accordion',

items: [{

tools: [{ type: 'gear', handler: function () {

Ext.Msg.alert('提示', '设置设置设备葡京娱乐官网下载安装摆设摆设按钮被点击。');

}

}, { 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: "打开第三页",

handler: function () {

Ext.getCmp('panel3').expand(true);

}

});

三、anchor

这个结构便是表单面板默认支持的,每一项盘踞一行,支持用anchor设置设置设备摆设摆设项分配各个子项的高度和宽度。为百分比时表示当前大年夜小占父容器的百分比,为数字的时一样平常为负数,表示父容器的值减去差值,剩下的为子项的大年夜小。

[Js]

//anchor

Ext.create('Ext.Panel', {

title: '容器面葡京娱乐官网下载安装板',

renderTo: 'div3',

width: 400,

height: 300,

layout: 'anchor',

items: [{

tools: [{ type: 'gear', handler: function () {

Ext.Msg.alert('提示', '设置设置设备摆设摆设按钮被点击。');

}

}, { 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

这个结构可以定义东南西北四个偏向的子元素,还有一个居中的子元素,一样平常用它来做页面整页结构,以是Ext.container.Viewport默认就支持了这个结构要领。

[Js]

//border

Ext.create('Ext.Panel', {

title: '容器面板',

renderTo: 'div4',

width: 400,

height: 300,

layout: 'border',

defaults: {

split: true,//是否有瓜分线

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

这个结构可以像卡片一样的切换每个子元素,各个子元素都邑独有父元素的容器空间。我们可以定义翻页按钮来节制当前处于活动状态的子元素。

[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,//默认活动项

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"

}],

bba葡京娱乐官网下载安装r: ['->', {

id: 'cardPrev',

text: '« 前一页',

handler: Ext.Function.bind(cardNav, this, [-1])

}, {

id: 'cardNext',

text: '后一页 »',

handler: Ext.Function.bind(cardNav, this, [1])

}]

});

六、column

这个结构把子元素按照列进行划分。

[Js]

//column

Ext.create('Ext.Panel', {

title: '容器面板',

renderTo: 'div6',

width: 400,

height: 300,

layout: 'column',

defaults: {//设置没一列的子元素的默认设置设置设备摆设摆设

layout: 'anchor',

defaults: {

anchor: '100%'

}

},

items: [{

columnWidth: 4 / 10,//设置列的宽度

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'

}]

}]

});

您可能还会对下面的文章感兴趣: