索引

• 概述
• 边框面板

概述

HT for Web提供了边框面板ht.widget.BorderPane的组件布局容器，可在上、下、左、右、中的五个区域位置摆放子组件， 子组件可为HT框架提供的组件，也可为HTML原生组件，子组件以position为absolute方式进行绝对定位。

TablePane和TreeTablePane组件内部就是采用BorderPane，对TableView和TableHeader进行布局。

边框面板

边框面板类ht.widget.BorderPane主要可配置属性和函数如下：

• isDisabled()和setDisabled(true/false, iconURL)获取和设置整个组件处于不可用状态
• topHeight顶部组件高度，可通过getTopHeight()/setTopHeight(topHeight)取值和设值
• topView顶部组件，可通过getTopView()/setTopView(view, topHeight)取值和设值
• bottomHeight底部组件高度，可通过getBottomHeight()/setBottomHeight(bottomHeight)取值和设值
• bottomView底部组件，可通过getBottomView()/setBottomView(view, bottomHeight)取值和设值
• leftWidth左侧组件宽度，可通过getLeftWidth()/setLeftWidth(leftWidth)取值和设值
• leftView左侧组件，可通过getLeftView()/setLeftView(view, leftWidth)取值和设值
• rightWidth右侧组件宽度，可通过getRightWidth()/setRightWidth(rightWidth)取值和设值
• rightView右侧组件，可通过getRightView()/setRightView(view, rightWidth)取值和设值
• centerView中间组件，可通过getCenterView()/setCenterView(value)取值和设值

示例中构建了两个BorderPane对象，其中innerBorder对象嵌套到另外一个的centerView的中间位置：

borderPane = new ht.widget.BorderPane();       
innerBorder = new ht.widget.BorderPane();

innerBorder.setTopView(createDiv('lightyellow', 'top'), 50);
innerBorder.setBottomView(createDiv('lightyellow', 'bottom'), 50);
innerBorder.setLeftView(createDiv('#3498DB', 'left'), 100);
innerBorder.setRightView(createDiv('#3498DB', 'right'), 100); 
innerBorder.setCenterView(createDiv('#F4F4F4', 'center')); 

borderPane.setTopView(createDiv('#1ABC9C'), 30);
borderPane.setBottomView(createDiv('#1ABC9C'), 30);
borderPane.setLeftView(createDiv('#E74C3C'), 50);
borderPane.setRightView(createDiv('#E74C3C'), 50);  
borderPane.setCenterView(innerBorder);