<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function () {
var cw;//表示的是window 组件
function closeRegion(e, target, header, tool) {
var panel = header.ownerCt;//获取持有Container元素
newRegions.unshift(panel.initialConfig); //unshift 把元素添加到数组的最前面
viewport.remove(panel);
}
var newRegions = [{
region: 'north',
title: 'North 2',
height: 100,
collapsible: true,
weight: -120
}, {
region: 'east', //东
title: 'East 2',
width: 100,
collapsible: true
}, {
region: 'west',
title: 'West 2',
collspsible: true,
width:100,
weight: -100
}];
var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true //箭头
},
items: [{
region: 'north',
colllapsible: true,
title: 'North',
split: true,
height: 100,
minHeight: 60,
html: 'north'
}, {
region: 'west',
collapsible: true,
title: 'Start at width 30%',
split: true,
width: '30%',
minWidth: 100,
minHeight: 140,
html: 'west<br>I am floatable'
}, {
region: 'center',
html: 'Center Center',
title: 'Center',
minHeight: 80,
items: [cw = Ext.create('Ext.Window', {
xtype: 'window',
closable: false, //不可关闭的
minimizable: true,
title: 'Constrained Window',
height: 200,
width: 300,
constrain: true,//强迫在 父元素里面
html: 'I am in a Container',
itemId: 'center-window',
minimize: function () { //最小化按钮执行的事件
this.floatParent.down('button#toggleCw').toggle(); //查询父容器 下的按钮 id为 toggleCw的 并执行他的toggle事件
}
})],
bbar: ['Text followed by a spacer', '| ', {
itemId: 'toggleCw',
text: 'Contrained Window',
enableToggle: true,
toggleHandler: function () {
cw.setVisible(!cw.isVisible());//设置窗体的显示. 循环显示和隐藏window窗体
}
}, {
text: 'Add Region',
listeners: {
click: function () { //单击事件
if (newRegions.length) {
var region = newRegions.pop();//pop方法移除数组的最后一个对象，并返回这个对象.使用pop方法的元素必须包含length属性
region.tools = [{ type: 'close', handler: closeRegion}]; //region 其实就是一个Panel对象，panel对象工具栏 添加 关闭按钮，关闭按钮的事件为 closeRegion
viewport.add(region);
}
else {
Ext.Msg.Show({
title: 'All Added',
msg: 'Close on of the dynamic regions first,关闭其中一个region!',
//minWidth:Ext.Msg.minWidth
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
}
}
}, {
text: 'Change Title',
listeners: {
click: function () {
var panels = viewport.query('panel');//component query
Ext.each(panels, function (panel) {
panel.setTitle(panel.title + "!");
});
}
}
}]
}, {
region: 'east',
collapsible: true,
floatable: true,
split: true,
width: 200,
minWidth: 120,
minHeight: 140,
title: 'east',
layout: {
type: 'vbox',
padding: 5,
align: 'stretch' //伸展
},
items: [{
xtype: 'textfield',
labelWidth: 70,
fieldLabel: 'Text field'
}, {
xtype: 'component',
html: 'I am floatable'
}]
}, {
region: 'south',
height: 100,
split: true,
collapsible: true,
title: 'Splitter above me',
minHeight: 60,
html: 'center south',
weight: -100
}, {
region: 'south',
title:'south',
collapsible: true,
split: true,
height: 200,
minHeight: 120,
layout: {
type: 'border',
padding: 5
},
items: [{
region: 'center',
title: 'South Central', //中心的主要的
minWidth: 80,
html: 'South Central'
}, {
title: 'South Eastern',
region: 'east',
flex: 1,
minWidth: 80,
html: 'South western - not resizable',
collapsible: true,
split:true
}, {
title:'South Western - not resizable',
region: 'west',
flex: 1,
minWidth: 80,
html: 'South Western<br> I collapse to nothing',
split: true,
collapsible: true,
splitterResize: true,
collapseMode: 'mini'
}]
}]
});
});
</script>
View Code
