因为问答频道询问这个问题,自己也遇到过,以前是用动态改变south大小来实现的,尝试直接实现一个动态的BorderLayout,发现很简单,下面代码改写自BorderLayout的代码,实现BorderLayout区域的动态增减:
布局控制器的代码:
Ext.layout.DynamicBorderLayout = Ext.extend(Ext.layout.BorderLayout, {
onLayout : function(ct, target) {
var collapsed = [];
target.position();
if (!this.rendered) {
target.addClass('x-border-layout-ct');
this.rendered = true;
}
//这部分代码直接从上面this.rendered的条件移出来,增加typeof this[pos] == "undefined"的判断
var items = ct.items.items;
for (var i = 0, len = items.length; i < len; i++) {
var c = items[i];
var pos = c.region;
if (typeof this[pos] == "undefined")
{
if (c.collapsed) {
collapsed.push(c);
}
c.collapsed = false;
if (!c.rendered) {
c.cls = c.cls ? c.cls + ' x-border-panel' : 'x-border-panel';
c.render(target, i);
}
this[pos] = pos != 'center' && c.split ?
new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
this[pos].render(target, c);
}
}
//删除掉不需要的区域属性
this.removeNotExistsRegion(ct.items);
var size = target.getViewSize();
if (size.width < 20 || size.height < 20) { // display none?
if (collapsed) {
this.restoreCollapsed = collapsed;
}
return;
} else if (this.restoreCollapsed) {
collapsed = this.restoreCollapsed;
delete this.restoreCollapsed;
}
var w = size.width, h = size.height;
var centerW = w, centerH = h, centerY = 0, centerX = 0;
var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
if (!c) {
throw 'No center region defined in BorderLayout ' + ct.id;
}
if (n && n.isVisible()) {
var b = n.getSize();
var m = n.getMargins();
b.width = w - (m.left + m.right);
b.x = m.left;
b.y = m.top;
centerY = b.height + b.y + m.bottom;
centerH -= centerY;
n.applyLayout(b);
}
if (s && s.isVisible()) {
var b = s.getSize();
var m = s.getMargins();
b.width = w - (m.left + m.right);
b.x = m.left;
var totalHeight = (b.height + m.top + m.bottom);
b.y = h - totalHeight + m.top;
centerH -= totalHeight;
s.applyLayout(b);
}
if (west && west.isVisible()) {
var b = west.getSize();
var m = west.getMargins();
b.height = centerH - (m.top + m.bottom);
b.x = m.left;
b.y = centerY + m.top;
var totalWidth = (b.width + m.left + m.right);
centerX += totalWidth;
centerW -= totalWidth;
west.applyLayout(b);
}
if (e && e.isVisible()) {
var b = e.getSize();
var m = e.getMargins();
b.height = centerH - (m.top + m.bottom);
var totalWidth = (b.width + m.left + m.right);
b.x = w - totalWidth + m.left;
b.y = centerY + m.top;
centerW -= totalWidth;
e.applyLayout(b);
}
var m = c.getMargins();
var centerBox = {
x: centerX + m.left,
y: centerY + m.top,
width: centerW - (m.left + m.right),
height: centerH - (m.top + m.bottom)
};
c.applyLayout(centerBox);
if (collapsed) {
for (var i = 0, len = collapsed.length; i < len; i++) {
collapsed[i].collapse(false);
}
}
if (Ext.isIE && Ext.isStrict) { // workaround IE strict repainting issue
target.repaint();
}
},
removeNotExistsRegion:function(items) {
var regions = ["north","south","west"];
for (var i = 0; i < regions.length; i++)
{
if (this[regions[i]] && !items.find(function(item) {
return item.region == regions[i]
}))
{
this[regions[i]] = undefined;
}
}
}
})
Ext.Container.LAYOUTS['dynamicborder'] = Ext.layout.DynamicBorderLayout;
可运行的例子:
Ext.onReady(function() {
var view = new Ext.Viewport({
layout:"fit",
items:{
layout:"dynamicborder",
items:[{
title: 'Main Content',
region:'center',
margins: '5 5 0 0',
tbar:[{
text:"增加南",
handler:function() {
var container = view.items.items[0];
var region = container.find("region", "south")[0];
if (region)
{
return;
}
container.add({
title: 'South Panel',
region: 'south',
height: 100,
minSize: 75,
maxSize: 250,
margins: '0 5 5 5'
});
container.doLayout();
}
},{
text:"去除南",
handler:function() {
var container = view.items.items[0];
var region = container.find("region", "south")[0];
container.remove(region);
container.doLayout();
}
},{
text:"增加西",
handler:function() {
var container = view.items.items[0];
var region = container.find("region", "west")[0];
if (region)
{
return;
}
container.add({
title: 'West Panel',
region:'west',
margins: '5 0 0 5',
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300
});
container.doLayout();
}
},{
text:"去除西",
handler:function() {
var container = view.items.items[0];
var region = container.find("region", "west")[0];
container.remove(region);
container.doLayout();
}
}]
}]
}
})
})
分享到:
- 2008-08-01 12:03
- 浏览 5168
- 评论(4)
- 论坛回复 / 浏览 (4 / 5208)
- 查看更多
相关推荐
简洁易懂的java高级基础部分:边界布局BorderLayout
java BorderLayout版面布局 java BorderLayout版面布局 java BorderLayout版面布局
BorderLayout实现窗口的布局。
BorderLayout 是 Java Swing 库提供的一种布局管理器,用于将容器划分为北、南、东、西和中五个区域,并在这些区域中添加组件。 在 BorderLayout 中,每个区域只能包含一个组件,当添加多个组件时,它们会自动填充...
API 参考 API 参考里面详细描述了所有能在 Ext 类库里面找到的类和组件。最常用的类有: Ext.Element Ext.BorderLayout Ext.DomHelper Ext.TabPanel Ext.UpdateManager
怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会...
Border布局由类Ext.layout.BorderLayout定义,布局名称为border。
怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还...
11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局...
matlab开发-BorderLayout。简单的gui布局管理器,用于模拟Java BorderLayout。
BorderLayout 使用 uipanels 为 GUI 创建一个简单的布局管理器,该管理器以 Java 的 BorderLayout 为模型。 它允许您将图形窗口或 uipanel 父项划分为五个区域:北、南、东、西和中心。 North 和 South 具有静态像素...
怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把日期选择框单独拿出来用的看这里 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省
Java布局管理的好例子,包括GridLayOut BorderLayOut CardLayOut等布局管理的实现
11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局...
基于JAVA的布局管理器-BorderLayout
Java程序设计经典300例源码边框布局BorderLayout布局设计.rar
Java中BorderLayout布局管理器.pdf 学习资料 复习资料 教学资源
SWT(JFace)体验之模拟BorderLayout布局代码。
所谓的布局管理器分为好多种,最常见的有流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文给大家介绍CSS3 flex布局之快速实现BorderLayout布局,感兴趣的朋友...