Component

Extends

• FineUI.Base

Members

el :jQuery

Description:

• 控件对应的jQuery节点对象

Type:

• jQuery

Methods

disable()

Description:

• 禁用控件（按钮变灰、表单字段不可输入；可用isDisabled查询当前状态）

Example

提交期间禁用按钮，避免重复提交（用 jQuery 的 $.ajax）：

FineUI.create({
    type: 'Button', text: '提交',
    handler: function () {
        var me = this;
        me.disable();
        $.ajax({
            url: '/api/save', method: 'POST', dataType: 'json',
            complete: function () {
                me.enable();
            }
        });
    }
});

doLayout(startFormTopmostComonentopt)

Description:

• 执行布局操作

Parameters:

enable()

Description:

• 启用控件（与disable对应）

getAttr(key) → {string}

Description:

• 获取节点属性

Parameters:

Returns:

Type

string

getEncodedText(text) → {string}

Description:

• 获取编码后的字符串

Parameters:

Returns:

Type

string

getHeight() → {number}

Description:

• 获取控件高度

Returns:

Type

number

getTooltip() → {string}

Description:

• 获取提示信息

Returns:

Type

string

getWidth() → {number}

Description:

• 获取控件宽度

Returns:

Type

number

hide()

Description:

• 隐藏控件（默认通过 CSS display:none 隐藏；可通过hiddenMode选择 visibility/offsets 模式以保留布局空间）

Example

根据权限隐藏按钮：

if (!currentUser.canEdit) {
    FineUI.ui.btnEdit.hide();
}

isDisabled() → {boolean}

Description:

• 是否禁用

Returns:

Type

boolean

isType(value) → {boolean}

Description:

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

Inherited From:

• FineUI.Base#isType

Example

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

Parameters:

Returns:

Type

boolean

isVisible() → {boolean}

Description:

• 是否可见

Returns:

Type

boolean

off(eventNames, fnopt)

Description:

• 移除事件

Examples

移除特定回调：

function onMyClick() { ... }
FineUI.ui.btn1.on('click', onMyClick);
// 后续解绑：
FineUI.ui.btn1.off('click', onMyClick);

移除某事件下的全部回调（不传 fn 参数）：

FineUI.ui.btn1.off('click');

Parameters:

on(eventNames, fn)

Description:

• 注册事件（运行时绑定；与配置参数listeners的初始绑定等价，但可在控件创建后动态追加）

Examples

初始绑定形态：在FineUI.create时通过listeners配置项一次性声明：

FineUI.create({
    type: 'Button', renderTo: document.body, text: '按钮',
    listeners: {
        click: function (event) {
            FineUI.alert('button clicked');
        },
        // 同一个 listeners 内可以同时声明多个事件
        beforeclick: function (event) {
            // 返回 false 可阻止 click 事件
        }
    }
});

运行时绑定形态：控件创建后通过on()追加，效果与上面的listeners等价：

FineUI.ui.btn1.on('click', function (event) {
    FineUI.alert('button clicked');
});

on()一次绑定多个事件（事件名之间空格分隔）：

FineUI.ui.tbxName.on('focus blur', function () {
    console.log('focus 或 blur 触发');
});

Parameters:

remove()

Description:

• 从父控件中移除当前控件并销毁其 DOM（不可恢复；移除后 FineUI.ui[id] 也会清除）。触发 remove 事件可用于清理外部资源。

Example

动态添加 + 移除子控件：

var btn = FineUI.create({
    type: 'Button', text: '临时按钮', renderTo: document.body
});
// 5 秒后移除
setTimeout(function () {
    btn.remove();
}, 5000);

removeAttr(key)

Description:

• 删除节点属性

Parameters:

removeTooltip()

Description:

• 删除提示信息

setAttr(key, value)

Description:

• 设置节点属性

Parameters:

setAttrs(attrs)

Description:

• 设置节点属性

Parameters:

setDisabled(disabled)

Description:

• 设置控件的禁用状态

Parameters:

setEnabled(enabled)

Description:

• 设置控件的启用状态

Parameters:

setHeight(height)

Description:

• 设置控件高度

Parameters:

setHidden(hidden)

Description:

• 设置控件的隐藏状态

Parameters:

setSize(width, height)

Description:

• 设置控件尺寸（同时设置宽高；等价于setWidth + setHeight但只触发一次布局）

Example

响应窗口 resize 调整面板尺寸：

$(window).on('resize', function () {
    FineUI.ui.panel1.setSize($(window).width() - 20, $(window).height() - 40);
});

Parameters:

setTooltip(tooltip)

Description:

• 设置提示信息

Parameters:

setVisible(visible)

Description:

• 设置控件的显示状态

Parameters:

setWidth(width)

Description:

• 设置控件宽度

Parameters:

show()

Description:

• 显示控件（与hide对应）

Example

根据下拉列表的选中项，联动显示某区块：

FineUI.ui.ddlType.on('change', function () {
    if (this.getValue() === 'advanced') {
        FineUI.ui.pnlAdvanced.show();
    } else {
        FineUI.ui.pnlAdvanced.hide();
    }
});

toggleEnabled()

Description:

• 切换启用状态

toggleVisible()

Description:

• 切换显示状态

trigger(eventName, args)

Description:

• 触发事件

Parameters:

Events

beforehide

Description:

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

beforeshow

Description:

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

hide

Description:

• 隐藏控件时触发

layout

Description:

• 布局控件时触发

remove

Description:

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

render

Description:

• 渲染控件时触发

show

Description:

• 显示控件时触发