# Class: Component

## F. Component

#### new F.Component(options)

F.Component.js, line 2
  控件的基类

  Name | Type | Description
  --- | --- | ---
  `options` | Object | 初始参数
  Name | Type | Default | Description
  --- | --- | --- | ---
  `renderTo` | string | '' | 渲染到的DOM节点
  `cls` | string | '' | CSS类
  `disabled` | boolean | false | 是否禁用
  `tooltip` | string | '' | 提示信息
  `tooltipType` | string | 'qtip' | 提示信息类型（可选项为：qtip, title）
  `tooltipTitle` | string | '' | 提示信息标题（仅在 tooltipType=qtip 时有效）
  `tooltipHideMode` | string | 'auto' | 提示信息隐藏模式（仅在tooltipType=qtip时有效）（可选项为：auto, user）
  `tooltipPosition` | string | '' | 提示信息的位置（仅在tooltipType=qtip时有效）（可选项为：'', top, topstart, topend, bottom, bottomstart, bottomend, left, leftstart, leftend, right, rightstart, rightend）
  `hidden` | boolean | false | 是否隐藏
  `hiddenMode` | string | 'display' | 隐藏模式（可选项为：display, visibility, offsets）
  `style` | string | Object |  | CSS样式
  `attrs` | Object |  | 节点属性
  `attrSelector` | string | '' | 节点属性对应的节点（默认为this.el）
  `width` | number |  | 宽度
  `height` | number |  | 高度
  `anchor` | string | '' | 锚点值（当父容器的布局为anchor时有效）
  `columnWidth` | string | '' | 列宽度（介于0-1的小数，比如0.25）（当父容器的布局为column时有效）
  `x` | number |  | 绝对定位的X坐标（当父容器的布局为absolute时有效）
  `y` | number |  | 绝对定位的Y坐标（当父容器的布局为absolute时有效）
  `rowspan` | number |  | 表格合并行数（当父容器的布局为table时有效）
  `colspan` | number |  | 表格合并列数（当父容器的布局为table时有效）
  `flex` | number |  | 子控件的尺寸（当父容器的布局为vbox或者hbox时有效）
  `block` | number |  | 块大小，超小屏幕（当父容器的布局为block时有效）
  `blockSM` | number |  | 块大小，小屏幕（当父容器的布局为block时有效）
  `blockMD` | number |  | 块大小，中等屏幕（当父容器的布局为block时有效）
  `blockLG` | number |  | 块大小，大屏幕（当父容器的布局为block时有效）
  `type` | string | 'component' | 控件类型

### Extends

- F.Base

### Members

#### eljQuery

  控件对应的jQuery节点对象

### Methods

#### disable()

F.Component.js, line 236
  禁用控件

#### doLayout(startFormTopmostComonent)

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

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

#### enable()

F.Component.js, line 242
  启用控件

#### getAttr(key){string}

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

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

  ##### Returns:

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

#### getHeight(){number}

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

  ##### Returns:

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

#### getTooltip(){string}

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

  ##### Returns:

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

#### getWidth(){number}

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

  ##### Returns:

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

#### hide()

F.Component.js, line 262
  隐藏控件

#### 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

#### isVisible(){boolean}

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

  ##### Returns:

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

#### off(eventNames, fn)

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

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

#### on(eventNames, fn)

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

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

#### remove()

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

#### removeAttr(key)

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

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

#### removeTooltip()

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

#### setAttr(key, value)

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

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

#### setAttrs(attrs)

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

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

#### setDisabled(disabled)

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

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

#### setEnabled(enabled)

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

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

#### setHeight(height)

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

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

#### setHidden(hidden)

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

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

#### setSize(width, height)

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

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

#### setTooltip(tooltip)

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

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

#### setVisible(visible)

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

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

#### setWidth(width)

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

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

#### show()

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

#### toggleEnabled()

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

#### toggleVisible()

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

#### trigger(eventName, args)

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

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

### Events

#### beforehide

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

#### beforeshow

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

#### hide

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

#### layout

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

#### render

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

#### show

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