ViewPort

FineUI. ViewPort

new ViewPort(options)

Description:

  • 页面视图控件

Examples

页面视图作为整页布局的根容器，自动撑满浏览器窗口。配合layout: 'region'做经典的"上中下/左中右"页面框架（region取 top/bottom/left/right/center，split: true允许拖动调整大小）：

FineUI.create({
	type: 'ViewPort', renderTo: document.body, layout: 'region',
	items: [{
		type: 'Panel', region: 'top', height: 60, content: '顶部 Header'
	}, {
		type: 'Panel', region: 'left', width: 200, split: true, content: '左侧菜单'
	}, {
		type: 'Panel', region: 'center', content: '中央内容区'
	}, {
		type: 'Panel', region: 'bottom', height: 40, content: '底部 Footer'
	}]
});

配合layout: 'fit'让单个子项填满整页（最简单的全屏应用场景）：

FineUI.create({
	type: 'ViewPort', renderTo: document.body, layout: 'fit',
	items: [{
		type: 'Grid', title: '全屏表格',
		columns: [{ text: 'ID', field: 'id' }, { text: '名称', field: 'name' }],
		data: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
	}]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
type string 'ViewPort'

控件类型

Extends

Members

bodyEl :jQuery

Description:

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

Inherited From:

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

Type:
  • jQuery

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:

  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

addTool(item)

Description:

  • 添加工具图标

Inherited From:
Parameters:
Name Type Description
item FineUI.Tool

工具图标实例

collapse()

Description:

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

Inherited From:
Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

expand()

Description:

  • 展开面板（与collapse对应）

Inherited From:

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
Returns:

编码后的字符串

Type
string

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

Description:

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

Inherited From:
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:

  • 获取内联框架元素

Inherited From:
Returns:

内联框架元素

Type
jQuery

getIFrameUrl() → {string}

Description:

  • 获取内联框架地址

Inherited From:
Returns:

内联框架地址

Type
string

getIFrameWindow() → {Window}

Description:

  • 获取内联框架窗体对象

Inherited From:
Returns:

内联框架窗体对象

Type
Window

getItem(value) → {FineUI.Component}

Description:

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

Inherited From:
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:

  • 获取面板标题提示信息

Inherited From:
Returns:

标题提示信息

Type
string

hasHScrollbar() → {boolean}

Description:

  • 是否存在水平滚动条

Inherited From:
Returns:

是否存在水平滚动条

Type
boolean

hasVScrollbar() → {boolean}

Description:

  • 是否存在垂直滚动条

Inherited From:
Returns:

是否存在垂直滚动条

Type
boolean

hidePopEl()

Description:

  • 隐藏容器内的所有弹出框

Inherited From:

insertTool(insertIndex, item)

Description:

  • 插入工具图标

Inherited From:
Parameters:
Name Type Description
insertIndex number

插入的位置
item FineUI.Tool

工具图标实例

isCollapsed() → {boolean}

Description:

  • 是否处于折叠状态

Inherited From:
Returns:

折叠状态

Type
boolean

isType(value) → {boolean}

Description:

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

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型
Returns:

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

Type
boolean

refreshIFrame()

Description:

  • 刷新内联框架

Inherited From:

setIFrameUrl(url)

Description:

  • 设置内联框架地址

Inherited From:
Parameters:
Name Type Description
url string

内联框架地址

setSplitDraggable() → {boolean}

Description:

  • 设置分隔条是否可以拖动

Inherited From:
Returns:

是否可以拖动

Type
boolean

setTitleTooltip(tooltip)

Description:

  • 设置面板标题提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息字符串

toggleCollapse()

Description:

  • 切换面板的折叠状态

Inherited From:

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

collapse

Description:

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

Inherited From:
Example

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

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});
Parameters:
Name Type Description
event jQuery.Event

事件对象

dirtychange

Description:

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

Inherited From:

expand

Description:

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

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

hide

Description:

  • 隐藏控件时触发

Inherited From:

iframeload

Description:

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

Inherited From:
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:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

resize

Description:

  • 面板尺寸改变时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From:

splitdrag

Description:

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

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象