PanelBase

FineUI. PanelBase

(abstract) new PanelBase(options)

Description:

面板控件基类。

抽象基类，不能直接实例化（~~FineUI.create({ type: 'PanelBase' })~~）。此类为其他面板控件提供共有能力：标题栏、折叠/展开、内联框架、布局相关、isViewPort / isFluid 等。

直接子类（按继承层级）：
- FineUI.Panel —— 通用面板容器（最常用，下列大多数控件继承自它）
  - FineUI.Window —— 窗体/对话框（FineUI.MessageBox 继承自它）
  - FineUI.Grid —— 表格
  - FineUI.Tree —— 树
  - FineUI.Tab / FineUI.TabStrip —— 选项卡
  - FineUI.Accordion / FineUI.AccordionPane —— 手风琴
  - FineUI.Form / FineUI.GroupPanel —— 表单 / 分组面板
- FineUI.ViewPort —— 全屏页面视图
- FineUI.Toolbar —— 工具栏（FineUI.PagingToolbar 继承自它）
- FineUI.ButtonGroup —— 按钮分组
- FineUI.MenuItemBase —— 菜单项基类（FineUI.MenuItem / FineUI.MenuCheckBox / FineUI.MenuSeparator）

Parameters:

Name Type Description

options

Object

初始参数

Properties

Name	Type	Default	Description
`header`	boolean	`false`	是否显示标题栏
`title`	string	`''`	标题文本
`titleAlign`	string	`'left'`	标题文本的显示位置（可选项为：left, center, right）
`titleTooltip`	string	`''`	标题文本的提示信息
`titleTooltipType`	string	`'qtip'`	标题文本的提示信息类型（可选项为：qtip, title）
`titleTooltipPosition`	string	`''`	标题文本的提示信息位置（仅在titleTooltipType=qtip时有效）（可选项为：'', top, topstart, topend, bottom, bottomstart, bottomend, left, leftstart, leftend, right, rightstart, rightend）
`icon`	string	`''`	图标
`iconFont`	string	`''`	图标字体
`iconFontCls`	string	`''`	自定义图标字体的样式类
`bodyCls`	string	`''`	主体元素的CSS类
`bodyStyle`	string	`''`	主体元素的样式
`bodyPadding`	string \| number	`''`	主体元素的内边距
`margin`	string \| number	`''`	外边距
`border`	boolean	`false`	是否显示边框
`collapsible`	boolean	`false`	是否可折叠
`collapsed`	boolean	`false`	是否处于折叠状态
`iframe`	boolean	`false`	是否启用内联框架
`iframeUrl`	string	`''`	内联框架网址
`iframeName`	string	`''`	内联框架名称（iframe节点的name属性）
`iframeAttrs`	Object		Iframe节点的属性
`minWidth`	number		最小宽度（默认不限制）
`minHeight`	number		最小高度（默认不限制）
`maxWidth`	number		最大宽度（默认不限制）
`maxHeight`	number		最大高度（默认不限制）
`region`	string	`'center'`	区域所在的位置（当父容器的布局为region时有效）
`split`	boolean	`false`	是否启用区域分隔条（当父容器的布局为region时有效）
`splitDraggable`	boolean	`true`	区域分隔条是否可拖动（当父容器的布局为region时有效）
`splitIcon`	boolean	`true`	是否显示区域分隔条图标（当父容器的布局为region时有效）
`splitWidth`	number	`6`	区域分隔条的宽度（当父容器的布局为region时有效）
`regionPercent`	string	`''`	区域的百分比尺寸（介于0-1的小数，比如0.25）（当父容器的布局为region时有效）
`isViewPort`	boolean	`false`	是否全屏视图（占据整个屏幕，仅适用于最外层控件）
`isFluid`	boolean	`false`	是否流式面板（占据整个宽度，仅适用于最外层控件）
`type`	string	`'PanelBase'`	控件类型

Extends

FineUI.Container

Members

bodyEl :jQuery

Description:

控件主体对应的jQuery节点对象

控件主体对应的jQuery节点对象

Type:

jQuery

el :jQuery

Description:

控件对应的jQuery节点对象

Inherited From:

FineUI.Component#el

控件对应的jQuery节点对象

Type:

jQuery

items :Object

Description:

子控件列表

Inherited From:

FineUI.Container#items

子控件列表

Type:

Object

Methods

addTool(item)

Description:

添加工具图标

Parameters:

Name	Type	Description
`item`	FineUI.Tool	工具图标实例

collapse()

Description:

折叠面板（程序触发；启用collapsible: true时有效）

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

expand()

Description:

展开面板（与collapse对应）

getEncodedText(text) → {string}

Description:

获取编码后的字符串

Inherited From:

FineUI.Component#getEncodedText

Parameters:

Name	Type	Description
`text`	string	原始字符串

Returns:

编码后的字符串

Type: string

getFormFields() → {Array.<FineUI.Field>}

Description:

获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:

FineUI.Container#getFormFields

Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }

Returns:

表单字段数组

Type: Array.<FineUI.Field>

getIFrameEl() → {jQuery}

Description:

获取内联框架元素

Returns:

内联框架元素

Type: jQuery

getIFrameUrl() → {string}

Description:

获取内联框架地址

Returns:

内联框架地址

Type: string

getIFrameWindow() → {Window}

Description:

获取内联框架窗体对象

Returns:

内联框架窗体对象

Type: Window

getItem(value) → {FineUI.Component}

Description:

获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:

FineUI.Container#getItem

Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});

Parameters:

Name	Type	Description
`value`	number \| string \| function	子控件索引、标识符或者匹配函数

Returns:

子控件实例

Type: FineUI.Component

getTitleTooltip() → {string}

Description:

获取面板标题提示信息

Returns:

标题提示信息

Type: string

hasHScrollbar() → {boolean}

Description:

是否存在水平滚动条

Returns:

是否存在水平滚动条

Type: boolean

hasVScrollbar() → {boolean}

Description:

是否存在垂直滚动条

Returns:

是否存在垂直滚动条

Type: boolean

hidePopEl()

Description:

隐藏容器内的所有弹出框

Inherited From:

FineUI.Container#hidePopEl

insertTool(insertIndex, item)

Description:

插入工具图标

Parameters:

Name	Type	Description
`insertIndex`	number	插入的位置
`item`	FineUI.Tool	工具图标实例

isCollapsed() → {boolean}

Description:

是否处于折叠状态

Returns:

折叠状态

Type: boolean

isType(value) → {boolean}

Description:

检测当前实例是否指定的控件类型

Inherited From:

FineUI.Base#isType

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

Parameters:

Name	Type	Description
`value`	Object	控件类型

Returns:

如果当前实例是指定的控件类型，返回true；否则返回false

Type: boolean

refreshIFrame()

Description:

刷新内联框架

setIFrameUrl(url)

Description:

设置内联框架地址

Parameters:

Name	Type	Description
`url`	string	内联框架地址

setSplitDraggable() → {boolean}

Description:

设置分隔条是否可以拖动

Returns:

是否可以拖动

Type: boolean

setTitleTooltip(tooltip)

Description:

设置面板标题提示信息

Parameters:

Name	Type	Description
`tooltip`	string	提示信息字符串

toggleCollapse()

Description:

切换面板的折叠状态

Events

beforehide

Description:

隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

FineUI.Component#event:beforehide

beforeshow

Description:

显示控件之前触发（返回false则取消显示操作）

Inherited From:

FineUI.Component#event:beforeshow

collapse

Description:

折叠面板时触发（启用collapsible: true时；用户点击折叠图标或调用collapse()都会触发）

Example

侧栏折叠后让中央面板"伸开"覆盖空间：

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

dirtychange

Description:

容器内的字段值改变时触发

expand

Description:

展开面板时触发（与collapse事件对应）

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

hide

Description:

隐藏控件时触发

Inherited From:

FineUI.Component#event:hide

iframeload

Description:

内联框架加载完毕时触发（启用iframe: true时；常用于和 iframe 内部脚本通讯）

Example

iframe 加载完成后给子页面注入参数：

FineUI.create({
    type: 'Window', iframe: true, iframeUrl: '/detail.aspx',
    listeners: {
        iframeload: function () {
            var iframeWin = this.getIFrameWindow();
            iframeWin.someInitFunction({ userId: 101 });
        }
    }
});

layout

Description:

布局控件时触发

Inherited From:

FineUI.Component#event:layout

remove

Description:

移除控件时触发（调用 remove() 时，控件 DOM 被销毁之前触发；可用于清理外部资源 / 解绑全局事件）

Inherited From:

FineUI.Component#event:remove

render

Description:

渲染控件时触发

Inherited From:

FineUI.Component#event:render

resize

Description:

面板尺寸改变时触发

show

Description:

显示控件时触发

Inherited From:

FineUI.Component#event:show

splitdrag

Description:

拖动分隔条时触发（拖动操作）

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象