构建 PanelLayout 类的新实例。
| 全称 | mx.containers.PanelLayout |
| 命名空间 | mx.containers |
| 类 | PanelLayout |
| 继承层次结构 | PanelLayoutContainerControl |
| 源文件 | ~\mx\scripts\containers\PanelLayout.js |
提供一个多面板布局的控件。面板有上下左右中五个，可使用其中任意组合的面板。
示例 1
以下是一个创建 PanelLayout 的示例。
| JavaScript 代码 |
var layout = new mx.containers.PanelLayout({
topPanelVisible:false, // 隐藏顶部面板
leftPanelVisible:false, // 隐藏左部面板
middlePanelHeight:400, // 设置中部面板高度
middlePanelWidth:"50%" // 设置中部面板宽度
}); |
示例 2
以下是一个向 PanelLayout 控件的面板中添加内容的示例。
| JavaScript 代码 |
var btn = new mx.controls.Button({
text:"bruce"
});
var label = new mx.controls.Label({
text:"dbm"
});
layout.addControl(label); // 添加到中部面板
layout.addControl(btn, "top"); // 添加到顶部面板 |
构造函数
| 名称 | 说明 |
| PanelLayout() | 构建 PanelLayout 类的新实例。 |
初始化函数
| 名称 | 说明 |
| init() | 初始化方法。执行设置样式并初始化属性等操作。 |
方法
| 名称 | 说明 |
| addControl(p_control, [p_panel], [p_islinebreak]) | 详见 Container.addControl 方法。 |
| addControls(p_controls, [p_panel]) | 详见 Container.addControls 方法。 |
| append($p_obj, [p_panel]) | 向容器中添加内容。 |
| clear() | 容器的clear方法 |
| contains($p_target) | 返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。 |
| dispose() | 释放对象运行时动态生成的内容（属性、方法、事件）。 |
| findControl(p_alias) | 根据指定的控件属性及属性值查找当前视图中对应的控件。 如果仅传入一个参数，则默认将该参数作为别名的值进行查找。 @overload function(p_alias) @param p_alias 一个字符串，表示控件的别名。 @overload function(p_attrName, p_attrValue) @param p_attrName 一个字符串，表示控件的属性名。 @param p_attrValue 一个字符串，表示控件的属性值。 |
| findControl(p_attrName, p_attrValue) | 根据指定的控件属性及属性值查找当前视图中对应的控件。 如果仅传入一个参数，则默认将该参数作为别名的值进行查找。 @overload function(p_alias) @param p_alias 一个字符串，表示控件的别名。 @overload function(p_attrName, p_attrValue) @param p_attrName 一个字符串，表示控件的属性名。 @param p_attrValue 一个字符串，表示控件的属性值。 |
| findControlByPermissionID(p_permissionID) | 根据指定的权限标识查找当前视图中对应的控件。 |
| getContext() | 获取控件当前所属 Weblet 的上下文信息（ WebletContext 类型）。 |
| getEl() | 获取控件容器对应的 HTML DOM 元素对象。 |
| hide() | 隐藏控件，设置控件不可见。 |
| moveTo(p_left, p_top) | 移动控件到指定位置。@param p_left 一个数字，表示 css 样式的 left 属性。 @param p_top 一个数字，表示 css 样式的 top 属性。 |
| removeControl(p_control, p_deep) | 从 controls 集合中移除指定的 Control 对象。 从集合中移除控件时，该控件会被从上下文的 DOM 中移除，但仍驻留在内存中，可以重用。 |
| resizeTo(p_width, p_height) | 重设控件的大小。@param p_width 控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。 @param p_height 控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。 |
| setBorder(p_border) | 设置控件的边框样式。@param p_border 一个字符串，表示css样式的 border 属性。 |
| setBottom(p_bottom) | 设置 bottom 字段的值。@param p_bottom 控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setCss(p_css) | 设置 css 字段的值。 @param p_css 一个 JSON 对象，表示控件的 CSS 样式。 |
| setCssClass(p_cssClass) | 设置 cssClass 字段的值 @param p_cssClass 一个String 对象，样式classname |
| setDisplay(p_display) | 设置 display 字段的值。@param p_display css 样式的 display 属性。 |
| setEnabled(p_enabled) | 获取一个 Boolean值，表示所有面板里面是否可拖动并改变大小。 |
| setHeight(p_height) | 设置 height 字段的值。 注：子类UploadControl上传控件不支持百分比设置高度 @param p_height 控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。 |
| setLeft(p_left) | 设置 left 字段的值。 @param p_left 控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setPadding(p_padding) | 设置控件的内边距。 {@excude mx.containers.Wizard} |
| setPosition(p_position) | 设置 position 字段的值。@param p_position 一个字符串，表示 css 样式的 position 属性。 |
| setRight(p_right) | 设置 right 字段的值。@param p_right 控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setTop(p_top) | 设置 top 字段的值。 @param p_top 控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setVisible(p_visible) | 设置 visible 字段的值。@param p_visible 一个 Boolean 值，表示控件是否可见。 |
| setWidth(p_width) | 设置 width 字段的值。@param p_width 控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）. |
| show() | 显示控件，设置控件可见。 |
| togglePanel(p_position) | |
| $(p_expression) | 该方法与 me.$e.find(p_expression) 等同。 |
| $wrap([p_obj]) | 返回一个 JQuery 对象。 |
字段
| 名称 | 说明 |
| alias | 获取或设置一个字符串，表示控件的别名。 |
| border | 获取控件的边框样式。如“1px solid red”，表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
| borderThick | 获取和设置边框粗细，一个数字（如 1、0）或字符串（如“2px”、“5px”）。 |
| bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
| bottomPanelResizable | 获取或设置一个 Boolean 值，表示底部面板是否可拖动并改变大小。 |
| bottomPanelVisible | 获取或设置一个 Boolean 值，表示底部面板是否可见。 |
| contextMenu | 获取或设置容器的上下文菜单。@default null |
| controls | 获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和 removeControl 方法向集合中添加或移除控件。 |
| cssClass | 指定css伪类名称，设置控件显示样式 |
| display | 获取控件的显示样式值。如“none”，表示隐藏控件； “block”表示强制作为块对象呈递。请使用 setDisplay方法设置该字段的值。 |
| enableBrowserContextMenu | 获取或初始化设置是否允许浏览器默认的上下文菜单。 |
| enabled | 获取或设置一个 Boolean 值，表示所有面板是否可拖动并改变大小。 |
| eTag | 获取控件的标签。 |
| height | 获取容器的高度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
layout |
获取和设置一个容器控件的布局器。该字段可选的值包括：
@example
下面是一个绝对定位布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor);
@example
下面是一个锚定布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2);
|
| layoutConfigs | 获取或者设置一个 JSON 对象，该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
| left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
| leftPanelResizable | 获取或设置一个 Boolean 值，表示左部面板是否可拖动并改变大小。 |
| leftPanelVisible | 获取或设置一个 Boolean 值，表示左部面板是否可见。 |
| leftPanelWidth | 获取或设置一个值，表示左部面板的宽度。该值可以为数字或百分比。 |
| middlePanelHeight | 获取或设置一个值，表示中部面板的高度。该值必须为数字。 |
| middlePanelWidth | 获取或设置一个值，表示中部面板的宽度。该值可以为数字或百分比。 |
| padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2 像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
| parent | 获取控件所属的父对象。 |
| permissionID | 获取或设置一个字符串，表示控件的权限标识。 |
| position | 详见 Control.position 属性。 |
| right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
| rightPanelResizable | 获取或设置一个 Boolean 值，表示右部面板是否可拖动并改变大小。 |
| rightPanelVisible | 获取或设置一个 Boolean 值，表示右部面板是否可见。 |
| top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
| topPanelHeight | 获取或设置一个值，表示顶部面板的高度。该值必须为数字。 |
| topPanelResizable | 获取或设置一个 Boolean 值，表示顶部面板是否可拖动并改变大小。 |
| topPanelVisible | 获取或设置一个 Boolean 值，表示顶部面板是否可见。 |
| visible | 获取一个 Boolean 值，表示控件是否可见。如果该值为 true，则表示控件可见；反之则不可见。请使用 setVisible 方法设置该字段的值。@default true |
| width | 获取容器的宽度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
| $container | 获取容器控件中用来包含控件 DOM 元素的占位符。 |
| $e | 获取该控件的占位符，该占位符为一个 JQuery 对象。 |
事件
| 名称 | 说明 |
| oncontextmenu | 在弹出上下之前执行 传入执行方法中参数为 {cancel:false,event:e}; cancel如果为true会中断默认逻辑的执行，event为事件参数 |
| onctrladded | 当添加控件到容器后，将触发该事件。 |
| onctrlremoved | 当从容器移除控件后，将触发该事件。 |
方法详细信息
addControl(p_control, [p_panel], [p_islinebreak]) 方法
详见 Container.addControl 方法。
参数
- p_control一个 Control 对象。
- p_panel可选的。默认值为“middle”。一个字符串，表示控件中哪个位置的面板（如“top”、“left”、“middle”、“right”、“bottom”）。
- p_islinebreak可选的。默认值为“true”。一个布尔值，表示添加控件时是否强制换行。
继承自
addControls(p_controls, [p_panel]) 方法
详见 Container.addControls 方法。
参数
- p_controls一个 Control 控件数组。
- p_panel可选的。默认值为“middle”。一个字符串，表示控件中哪个位置的面板（如“top”、“left”、“middle”、“right”、“bottom”）。
继承自
append($p_obj, [p_panel]) 方法
向容器中添加内容。
参数
- $p_obj一个 Control 对象。
- p_panel可选的。默认值为“middle”。一个字符串，表示控件中哪个位置的面板（如“top”、“left”、“middle”、“right”、“bottom”）。
继承自
contains($p_target) 方法
返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。
参数
- $p_target一个 JQuery 对象，或 JQuery 选择器对应的字符串（如“#container”），或 HTML DOM 元素。
继承自
findControl(p_alias) 方法
根据指定的控件属性及属性值查找当前视图中对应的控件。
如果仅传入一个参数，则默认将该参数作为别名的值进行查找。
@overload function(p_alias)
@param p_alias 一个字符串，表示控件的别名。
@overload function(p_attrName, p_attrValue)
@param p_attrName 一个字符串，表示控件的属性名。
@param p_attrValue 一个字符串，表示控件的属性值。
参数
- p_alias一个字符串，表示控件的别名。
继承自
findControl(p_attrName, p_attrValue) 方法
根据指定的控件属性及属性值查找当前视图中对应的控件。
如果仅传入一个参数，则默认将该参数作为别名的值进行查找。
@overload function(p_alias)
@param p_alias 一个字符串，表示控件的别名。
@overload function(p_attrName, p_attrValue)
@param p_attrName 一个字符串，表示控件的属性名。
@param p_attrValue 一个字符串，表示控件的属性值。
参数
- p_attrName一个字符串，表示控件的属性名。
- p_attrValue一个字符串，表示控件的属性值。 {@exclude mx.datacontrols.DynamicForm}
继承自
findControlByPermissionID(p_permissionID) 方法
根据指定的权限标识查找当前视图中对应的控件。
参数
- p_permissionID一个字符串，表示控件的权限标识。
继承自
moveTo(p_left, p_top) 方法
移动控件到指定位置。@param p_left
一个数字，表示 css 样式的 left 属性。
@param p_top
一个数字，表示 css 样式的 top 属性。
参数
- p_left一个数字，表示 css 样式的 left 属性。
- p_top一个数字，表示 css 样式的 top 属性。
继承自
resizeTo(p_width, p_height) 方法
重设控件的大小。@param p_width
控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
@param p_height
控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
参数
- p_width控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
setBorder(p_border) 方法
设置控件的边框样式。@param p_border
一个字符串，表示css样式的 border 属性。
参数
- p_border一个字符串，表示css样式的 border 属性。
继承自
setBottom(p_bottom) 方法
设置 bottom 字段的值。@param p_bottom
控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_bottom控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
继承自
setCss(p_css) 方法
设置 css 字段的值。
@param p_css 一个 JSON 对象，表示控件的 CSS 样式。
参数
- p_css一个 JSON 对象，表示控件的 CSS 样式。 {@exclude mx.datacontrols.ScrollBar}
继承自
setCssClass(p_cssClass) 方法
设置 cssClass 字段的值
@param p_cssClass 一个String 对象，样式classname
参数
- p_cssClass一个String 对象，样式classname {@exclude mx.datacontrols.ScrollBar}
继承自
setDisplay(p_display) 方法
setEnabled(p_enabled) 方法
获取一个 Boolean值，表示所有面板里面是否可拖动并改变大小。
参数
- p_enabled一个Boolean值 true 或 false
继承自
setHeight(p_height) 方法
设置 height 字段的值。
注：子类UploadControl上传控件不支持百分比设置高度
@param p_height
控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
参数
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
setLeft(p_left) 方法
设置 left 字段的值。
@param p_left
控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_left控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 {@exclude mx.datacontrols.ComplexForm} {@exclude mx.datacontrols.DataGridSearchBox} {@exclude mx.datacontrols.DynamicForm} {@exclude mx.datacontrols.SkinDataForm}
继承自
setPadding(p_padding) 方法
设置控件的内边距。
{@excude mx.containers.Wizard}
参数
- p_paddingcss 样式的 padding 属性。
继承自
setPosition(p_position) 方法
设置 position 字段的值。@param p_position
一个字符串，表示 css 样式的 position 属性。
参数
- p_position一个字符串，表示 css 样式的 position 属性。
继承自
setRight(p_right) 方法
设置 right 字段的值。@param p_right
控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_right控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
继承自
setTop(p_top) 方法
设置 top 字段的值。
@param p_top
控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_top控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 {@exclude mx.datacontrols.ComplexForm} {@exclude mx.datacontrols.DataGridSearchBox} {@exclude mx.datacontrols.DynamicForm} {@exclude mx.datacontrols.SkinDataForm}
继承自
setVisible(p_visible) 方法
setWidth(p_width) 方法
设置 width 字段的值。@param p_width
控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）.
参数
- p_width控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）.
继承自
togglePanel(p_position) 方法
参数
- p_position一个字符串， 表示需要隐藏或显示的面板位置。
该参数常见值包括:
- left （隐藏或显示左边面板）
- top （隐藏或显示顶部面板）
- right （隐藏或显示右边面板，前提是中间区域分为了左、中、右三部分）
- bottom（隐藏或显示底部面板）
$wrap([p_obj]) 方法
返回一个 JQuery 对象。
参数
- p_obj可选的。默认值为“me.$e”。一个 JQuery 对象，或继承自 Control 的控件，或字符串，或 HTML DOM 元素。 如果参数为 JQuery 对象，则返回本身； 如果参数为继承自 Control 的控件，则返回控件的 $e 对象； 如果参数为字符串，则返回以字符串为选择器的 JQuery 对象； 如果参数为空，则返回控件本身的 $e 对象。
继承自
字段详细信息
borderThick 字段
获取和设置边框粗细，一个数字（如 1、0）或字符串（如“2px”、“5px”）。
bottomPanelResizable 字段
获取或设置一个 Boolean 值，表示底部面板是否可拖动并改变大小。
默认值
true
bottomPanelVisible 字段
获取或设置一个 Boolean 值，表示底部面板是否可见。
默认值
true
controls 字段
获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和
removeControl 方法向集合中添加或移除控件。
继承自
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.controls.Control。
集合索引
控件在集合中的序号（从 0 开始计数）。
enableBrowserContextMenu 字段
layout 字段
获取和设置一个容器控件的布局器。该字段可选的值包括：
@example
下面是一个绝对定位布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor);
@example
下面是一个锚定布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2);
继承自
示例 1
下面是一个绝对定位布局的容器添加控件的示例：
| JavaScript 代码 |
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor); |
示例 2
下面是一个锚定布局的容器添加控件的示例：
| JavaScript 代码 |
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2); |
layoutConfigs 字段
leftPanelResizable 字段
获取或设置一个 Boolean 值，表示左部面板是否可拖动并改变大小。
默认值
true
leftPanelVisible 字段
获取或设置一个 Boolean 值，表示左部面板是否可见。
默认值
true
leftPanelWidth 字段
获取或设置一个值，表示左部面板的宽度。该值可以为数字或百分比。
默认值
20%
middlePanelHeight 字段
获取或设置一个值，表示中部面板的高度。该值必须为数字。
默认值
300
middlePanelWidth 字段
获取或设置一个值，表示中部面板的宽度。该值可以为数字或百分比。
默认值
60%
padding 字段
获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2
像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。
继承自
rightPanelResizable 字段
获取或设置一个 Boolean 值，表示右部面板是否可拖动并改变大小。
默认值
true
rightPanelVisible 字段
获取或设置一个 Boolean 值，表示右部面板是否可见。
默认值
true
topPanelHeight 字段
获取或设置一个值，表示顶部面板的高度。该值必须为数字。
默认值
80
topPanelResizable 字段
获取或设置一个 Boolean 值，表示顶部面板是否可拖动并改变大小。
默认值
true
topPanelVisible 字段
获取或设置一个 Boolean 值，表示顶部面板是否可见。
默认值
true
visible 字段
获取一个 Boolean 值，表示控件是否可见。如果该值为 true，则表示控件可见；反之则不可见。请使用 setVisible
方法设置该字段的值。@default true
继承自
默认值
true