# Class: ViewPort

## F. ViewPort

#### new F.ViewPort(options)

F.ViewPort.js, line 2
  页面视图控件

  Name | Type | Description
  --- | --- | ---
  `options` | Object | 初始参数
  Name | Type | Default | Description
  --- | --- | --- | ---
  `type` | string | 'viewport' | 控件类型

### Extends

- F.PanelBase

### Members

#### bodyEljQuery

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

#### eljQuery

  控件对应的jQuery节点对象

#### itemsObject

  子控件列表

### Methods

#### inherited add(value)

F.Container.js, line 55
  添加新的子控件到当前控件

  Name | Type | Description
  --- | --- | ---
  `value` | Object | Array.<Object> | 控件实例数组

  ##### Example

      menu1.add(['-', {
      		type: 'menuitem',
      		text: '新菜单项'
      }]);

#### inherited addTool(item)

F.PanelBase.js, line 171
  添加工具图标

  Name | Type | Description
  --- | --- | ---
  `item` | F.Tool | 工具图标实例

#### inherited clearDirty()

F.Container.js, line 83
  清空容器内字段的改变状态（接受字段已改变的值）

#### inherited collapse()

F.PanelBase.js, line 194
  折叠面板

#### inherited disable()

F.PanelBase.js, line 102
  禁用控件

#### inherited doLayout(startFormTopmostComonent)

F.Component.js, line 122
  执行布局操作

  Name | Type | Default | Description
  --- | --- | --- | ---
  `startFormTopmostComonent` | boolean | false | optional 从最顶层的控件开始布局

#### inherited enable()

F.PanelBase.js, line 108
  启用控件

#### inherited expand()

F.PanelBase.js, line 200
  展开面板

#### inherited getAttr(key){string}

F.Component.js, line 101
  获取节点属性

  Name | Type | Description
  --- | --- | ---
  `key` | string | 节点属性键

  ##### Returns:

  Type | Description
  --- | ---
  string | 节点属性值

#### inherited getFormFields(){Array.<F.Field>}

F.Container.js, line 64
  获取容器内的所有表单字段

  ##### Returns:

  Type | Description
  --- | ---
  Array.<F.Field> | 表单字段数组

#### inherited getHeight(){number}

F.Component.js, line 136
  获取控件高度

  ##### Returns:

  Type | Description
  --- | ---
  number | 高度

#### inherited getIconEl(){jQuery}

F.PanelBase.js, line 143
  获取图标元素

  ##### Returns:

  Type | Description
  --- | ---
  jQuery | 图标元素

#### inherited getIFrameEl(){jQuery}

F.PanelBase.js, line 253
  获取内联框架元素

  ##### Returns:

  Type | Description
  --- | ---
  jQuery | 内联框架元素

#### inherited getIFrameUrl(){string}

F.PanelBase.js, line 246
  获取内联框架地址

  ##### Returns:

  Type | Description
  --- | ---
  string | 内联框架地址

#### inherited getIFrameWindow(){Window}

F.PanelBase.js, line 260
  获取内联框架窗体对象

  ##### Returns:

  Type | Description
  --- | ---
  Window | 内联框架窗体对象

#### inherited getItem(value){F.Component}

F.Container.js, line 112
  获取子控件

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

  ##### Returns:

  Type | Description
  --- | ---
  F.Component | 子控件实例

#### inherited getScrollEl(){jQuery}

F.PanelBase.js, line 115
  获取可滚动元素

  ##### Returns:

  Type | Description
  --- | ---
  jQuery | 可滚动元素

#### inherited getTitle(){string}

F.PanelBase.js, line 218
  获取面板标题

  ##### Returns:

  Type | Description
  --- | ---
  string | 标题文本

#### inherited getTitleTooltip(){string}

F.PanelBase.js, line 225
  获取面板标题提示信息

  ##### Returns:

  Type | Description
  --- | ---
  string | 标题提示信息

#### inherited getTooltip(){string}

F.Component.js, line 196
  获取提示信息

  ##### Returns:

  Type | Description
  --- | ---
  string | 提示信息

#### inherited getWidth(){number}

F.Component.js, line 130
  获取控件宽度

  ##### Returns:

  Type | Description
  --- | ---
  number | 宽度

#### inherited hasHScrollbar(){boolean}

F.PanelBase.js, line 122
  是否存在水平滚动条

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否存在水平滚动条

#### inherited hasIcon(){boolean}

F.PanelBase.js, line 137
  是否有图标

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否有图标

#### inherited hasVScrollbar(){boolean}

F.PanelBase.js, line 130
  是否存在垂直滚动条

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否存在垂直滚动条

#### inherited hide()

F.PanelBase.js, line 273
  隐藏面板

#### inherited hideLoading()

F.Container.js, line 95
  隐藏加载动画

#### inherited insert(insertIndex, value)

F.Container.js, line 44
  插入新的子控件到当前控件

  Name | Type | Description
  --- | --- | ---
  `insertIndex` | number | 插入的位置
  `value` | Object | Array.<Object> | 控件实例数组

  ##### Example

      menu1.insert(0, ['-', {
      		type: 'menuitem',
      		text: '新菜单项'
      }]);

#### inherited insertTool(item, insertIndex)

F.PanelBase.js, line 179
  插入工具图标

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

#### inherited isCollapsed(){boolean}

F.PanelBase.js, line 188
  是否处于折叠状态

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 折叠状态

#### inherited isDirty(){boolean}

F.Container.js, line 77
  容器内的表单字段是否已经改变

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 容器内的表单字段是否已经改变

#### inherited isDisabled(){boolean}

F.Component.js, line 224
  是否禁用

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否禁用

#### inherited isType(value){boolean}

F.Base.js, line 23
  检测当前实例是否指定的控件类型

  Name | Type | Description
  --- | --- | ---
  `value` | Object | 控件类型

  ##### Returns:

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

  ##### Example

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

#### inherited isValid(onlyFirstInvalidField){Array.<Object>}

F.Container.js, line 71
  容器内的表单字段是否有效

  Name | Type | Default | Description
  --- | --- | --- | ---
  `onlyFirstInvalidField` | boolean | false | 是否仅返回第一个无效的字段

  ##### Returns:

  Type | Description
  --- | ---
  Array.<Object> | 容器内的表单字段是否有效（[isValid, firstInvalidField, secondInvalidField, thirdInvalidField...]）

#### inherited isVisible(){boolean}

F.Component.js, line 216
  是否可见

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否可见

#### inherited off(eventNames, fn)

F.Component.js, line 181
  移除事件

  Name | Type | Description
  --- | --- | ---
  `eventNames` | string | 事件名称（可以空格分割多个事件名称）
  `fn` | F_Component_on | 之前注册的事件处理函数

#### inherited on(eventNames, fn)

F.Component.js, line 174
  注册事件

  Name | Type | Description
  --- | --- | ---
  `eventNames` | string | 事件名称（可以空格分割多个事件名称）
  `fn` | F_Component_on | 触发事件时执行的函数

#### inherited refreshIFrame()

F.PanelBase.js, line 267
  刷新内联框架

#### inherited remove()

F.Component.js, line 115
  删除父控件中移除当前控件

#### inherited removeAttr(key)

F.Component.js, line 108
  删除节点属性

  Name | Type | Description
  --- | --- | ---
  `key` | string | 节点属性键

#### inherited removeTooltip()

F.Component.js, line 208
  删除提示信息

#### inherited reset()

F.Container.js, line 89
  重置容器内的全部字段

#### inherited setAttr(key, value)

F.Component.js, line 94
  设置节点属性

  Name | Type | Description
  --- | --- | ---
  `key` | string | 节点属性键
  `value` | string | 节点属性值

#### inherited setAttrs(attrs)

F.Component.js, line 86
  设置节点属性

  Name | Type | Description
  --- | --- | ---
  `attrs` | Object | 节点属性对象

#### inherited setDisabled(disabled)

F.Component.js, line 248
  设置控件的禁用状态

  Name | Type | Description
  --- | --- | ---
  `disabled` | boolean | 是否禁用

#### inherited setEnabled(enabled)

F.Component.js, line 254
  设置控件的启用状态

  Name | Type | Description
  --- | --- | ---
  `enabled` | boolean | 是否启用

#### inherited setHeight(height)

F.Component.js, line 143
  设置控件高度

  Name | Type | Description
  --- | --- | ---
  `height` | number | 高度

#### inherited setHidden(hidden)

F.Component.js, line 286
  设置控件的隐藏状态

  Name | Type | Description
  --- | --- | ---
  `hidden` | boolean | 是否隐藏

#### inherited setIcon(icon)

F.PanelBase.js, line 152
  设置图标地址

  Name | Type | Description
  --- | --- | ---
  `icon` | string | 图标地址

  ##### Example

      F.ui.panel1.setIcon('../res/images/16/1.png');

#### inherited setIconFont(iconFont)

F.PanelBase.js, line 161
  设置图标字体

  Name | Type | Description
  --- | --- | ---
  `iconFont` | string | 图标字体

  ##### Example

      F.ui.panel1.setIconFont('bank');

#### inherited setIFrameUrl(url)

F.PanelBase.js, line 239
  设置内联框架地址

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

#### inherited setSize(width, height)

F.Component.js, line 158
  设置控件尺寸

  Name | Type | Description
  --- | --- | ---
  `width` | number | 宽度
  `height` | number | 高度

#### inherited setSplitDraggable(){boolean}

F.PanelBase.js, line 281
  设置分隔条是否可以拖动

  ##### Returns:

  Type | Description
  --- | ---
  boolean | 是否可以拖动

#### inherited setTitle(title)

F.PanelBase.js, line 212
  设置面板标题

  Name | Type | Description
  --- | --- | ---
  `title` | string | 标题文本

#### inherited setTitleTooltip(tooltip)

F.PanelBase.js, line 232
  设置面板标题提示信息

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

#### inherited setTooltip(tooltip)

F.Component.js, line 202
  设置提示信息

  Name | Type | Description
  --- | --- | ---
  `tooltip` | string | 提示信息

#### inherited setVisible(visible)

F.Component.js, line 280
  设置控件的显示状态

  Name | Type | Description
  --- | --- | ---
  `visible` | boolean | 是否可见

#### inherited setWidth(width)

F.Component.js, line 150
  设置控件宽度

  Name | Type | Description
  --- | --- | ---
  `width` | number | 宽度

#### inherited show()

F.Component.js, line 268
  显示控件

#### inherited showLoading(opacity, container)

F.Container.js, line 103
  显示加载动画

  Name | Type | Description
  --- | --- | ---
  `opacity` | number | 透明度（默认值：0.65）
  `container` | jQuery | 显示动画的目标元素（留空则为内容元素）

#### inherited toggleCollapse()

F.PanelBase.js, line 206
  切换面板的折叠状态

#### inherited toggleEnabled()

F.Component.js, line 230
  切换启用状态

#### inherited toggleVisible()

F.Component.js, line 274
  切换显示状态

#### inherited trigger(eventName, args)

F.Component.js, line 189
  触发事件

  Name | Type | Description
  --- | --- | ---
  `eventName` | string | 事件名称
  `args` | Object | 事件参数

### Events

#### inherited beforehide

F.Component.js, line 57
  隐藏控件之前触发（返回false则取消隐藏操作）

#### inherited beforeshow

F.Component.js, line 69
  显示控件之前触发（返回false则取消显示操作）

#### inherited collapse

F.PanelBase.js, line 68
  折叠面板时触发

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

#### inherited dirtychange

F.PanelBase.js, line 45
  容器内的字段值改变时触发

#### inherited expand

F.PanelBase.js, line 76
  展开面板时触发

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

#### inherited hide

F.Component.js, line 63
  隐藏控件时触发

#### inherited iframeload

F.PanelBase.js, line 84
  内联框架加载完毕时触发

#### inherited layout

F.Component.js, line 45
  布局控件时触发

#### inherited render

F.Component.js, line 51
  渲染控件时触发

#### inherited resize

F.PanelBase.js, line 61
  面板尺寸改变时触发

#### inherited show

F.Component.js, line 75
  显示控件时触发

#### inherited splitdrag

F.PanelBase.js, line 53
  拖动分隔条时触发（拖动操作）

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