F.js v7.1.0

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

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
显示控件时触发