HT UI 文本框及子类手册

索引

文本框
数字输入框
文本组合框
文本域
下拉框
级联下拉框
多选下拉
颜色选择器
日期时间选择器

文本框

文本框用来接收用户输入的单行数据；从 ht.ui.View 继承，因此支持组件的通用属性：背景、边框、内边距、样式等；此组件支持辅助图标，参考下面的例子：

// 过滤字符(只能输入数字)，每次输入的字符都要经过这个正则表达式验证(通过 text.FieldsetType('number') 也可以实现只能输入数字)
textField.setMaskRe(/\d/);
// 设置输入提示
textField.setPlaceholder('Input here');
// 设置三态图标
textField.setIcon('roundNormal.png');
textField.setHoverIcon('roundHover.png');
textField.setActiveIcon('roundActive.png');
// 监听图标点击事件
textField.on('clickIcon', function(e) {
    alert('click icon!');
});

这个例子中还使用了 FocusLineBorder 为文本框设置 focus 状态时的边框颜色：

textField.setBorder(new ht.ui.border.FocusLineBorder(1, 'gray', 'red'));

使用 TextField 组件最常见的需求就是监听文本框内容变化：

上面例子中，两个文本框都是通过 on(addPropertyChangeListener) 监听 value 属性变化：

textField.on('p:value', function(e) {
    label.setText(e.newValue);
});

第一个文本框失去焦点或者用户敲回车时，会派发属性变化事件，并更新 Label 组件；第二个文本框有两个特殊的地方：

// 修改内部文本框的 type 属性为 password，也可以修改成 HTML 支持的其它类型，如 number
textField2.setType('password');
// 立即模式，用户每输入一个字符，会马上派发事件，因此右侧 Label 内容马上被更新
textField2.setInstant(true);

设置只读文本框可以使用从 ht.ui.View 继承过来的 setDisabled(true) 方法，但是这样文本内容也无法选中了；如果只是为了禁止输入内容，不影响文字选中和复制，可以用下面的方式：

textField.setReadOnly(true);

数字输入框

数字输入框从文本框继承，专用于输入数字，提供增加、减小两个按钮用于调整值，值变化的步进可以通过 step 属性修改，下面是一个例子：

文本组合框

ht.ui.InputGroup 是 ht.ui.HBoxLayout 的子类，因此本质上是一个容器(布局器)，这个容器在文本框的左侧和右侧都预留了一个组件空间用于显示前缀和后缀；下面的例子演示了文本组合框的用法：

文本域

ht.ui.TextArea 从 ht.ui.TextField 继承，只是将 TextField 内部的 input 文本框换成 textarea，正常用法不再赘述，接下来看一个自适应高度的例子：

这里例子中，我们将 TextArea 放到 VBoxLayout 中，并且设置它的布局高度是 wrap_content，这样 VBoxLayout 布局器布局 TextArea 时就会取它的首选大小(preferredSize)；

然后我们重写了 figureTextSize，通过临时 DOM 的方式计算内容文本的尺寸：

textArea.figureTextSize = function () {
    var tempInput = this._tempInput;
    if (!tempInput) {
        tempInput = this._tempInput = document.createElement('textarea');
        tempInput.style.visibility = 'hidden';
        tempInput.style.boxSizing = 'border-box';
        tempInput.style.border = '0';
        tempInput.style.overflow = 'hidden';
        tempInput.style.resize = 'none';
        tempInput.style.outline = 'none';
        tempInput.style.position = "absolute";
    }

    var input = this.getInput();
    var font = this.getFont();
    var lineHeight = this.getLineHeight();
    var width = this.getContentWidth();

    tempInput.style.font = font;
    tempInput.style.lineHeight = lineHeight + 'px';
    tempInput.value = input.value;
    if (width != null)
        tempInput.style.width = width + 'px';

    document.body.appendChild(tempInput);
    var size = {
        width: tempInput.scrollWidth,
        height: tempInput.scrollHeight
    };
    document.body.removeChild(tempInput);
    return size;
};

我们希望输入过程中或宽度变化时要一直自适应，因此设置下面的属性：

// 设置每次 validate 时都检测组件宽度是否变化, 如果发生了变化, 自动重新计算高度
textArea.setAutoRefreshPreferredSize(true);
// 设置用户每输入一个字符就派发 value 属性变化事件, 然后重新检测 preferredSize
textArea.setInstant(true);

下拉框

ht.ui.ComboBox 是 TextField 的子类，提供一个下拉列表供用户选择，当然也可以像 TextField 那样直接输入内容，参考下面的例子：

例子中设置了两种不同的 datas 格式：

comboBox.setDatas(['Male', 'Female']);

comboBox2.setDatas([
    {
        label: 'Nodes',
        isGroup: true
    },
    {
        id: 'node',
        label: 'Node',
        icon: 'node_icon'
    },
    {
        id: 'shape',
        label: 'Shape',
        icon: 'shape_icon'
    },
    {
        id: 'group',
        label: 'Group',
        icon: 'group_icon'
    },
    {
        label: 'Edges',
        isGroup: true
    },
    {
        id: 'edge',
        label: 'Edge',
        icon: 'edge_icon'
    },
    {
        id: 'shapeedge',
        label: 'Shape Edge',
        icon: 'edge_icon'
    }
]);

注意到第二个下拉框是可以输入的，输入的值可以用来过滤下拉列表的内容，也可以直接作为下拉框的值，如果不允许自定义值(只允许选择)，请将下拉框设置为只读：

comboBox.setReadOnly(true);

默认的下拉组件默认是个 ListView，通过 setDropDownConfig 设置下拉组件的属性：

comboBox.setDropDownConfig({
    'width': 100, // 下拉框宽度
    'height': 100, // 下拉框高度
    'dropDownView.background': 'red' // dropDownView.xxx 用来设置下拉组件的属性
});

UI 库提供 ht.ui.DropDownTemplate 作为下拉模板接口，下面的例子演示了如何实现这个接口自定义下拉组件(左侧下拉地图，右侧下拉树)：

ht.ui.DropDownTemplate 接口的函数说明在 API 文档中有详细说明，这里就不再赘述了

级联下拉框

ht.ui.CascadeComboBox 是 ht.ui.ComboBox 的子类，使用 ht.ui.CascadeDropDown 作为下拉模板，用于实现级联选择(比如地址选择)，参考下面的例子：

注意，此组件的 getValue 函数返回值为一个数组，数组元素为 datas 参数中相应层次中选中的 object 对象，如果指定了组件的 valueField 参数，则数组元素为为 object 对象中指定字段的值

上面的例子演示了 datas 格式以及如何用 loader 延时加载数据

多选下拉框

ht.ui.MultiSelect 是 ht.ui.FlowLayout 的子类，因此本质上是一个容器(布局器)，但是它的 API 非常与 ht.ui.Combobox 非常相似，比如也有 datas 属性，再比如使用 ht.ui.MultiListDropDown 作为下拉模板；下面的例子演示了多选下拉的用法：

通过 style 可以配置样式风格：

颜色选择器

ht.ui.ColorPicker 是 ht.ui.ComboBox 的子类，使用 ht.ui.SplitLayout 作为下拉模板(包含 ColorPane 和两个按钮)，参考下面的例子：

颜色弹出面板底部的颜色块是可以配置的，按照下面的方式配置自己项目中常用的颜色：

colorPicker.setDropDownConfig({
    'dropDownView.background': 'red', // dropDownView.xxx 用于配置 SplitLayout 的属性
    'colorPane.paletteColors': {// colorPane.xxx 用于配置 ColorPane 的属性
        'MyColors': [[null, '#F6D897', '#F2BF40', '#F8AC19', '#986B22', '#215D54', '#25834C', '#24D098'],
        ['#F3C0C9', '#BB6765', '#B24A5B', '#8D384D', '#A83A39', '#205586', '#3DABDD', '#A4D9DF']]
    }
});

日期时间选择器

ht.ui.DateTimePicker 和 ht.ui.DateRangePicker 是 ht.ui.ComboBox 的子类，使用 ht.ui.DateTimeDropDown 以及 ht.ui.DateRangeDropDown 作为下拉模板，参考下面的例子：

通过 dropDownConfig 可以配置 dropDown、DropDownView 以及 dateTimePane 的属性：

dateTimePicker.setDropDownConfig({
    'buttonTexts': ['确定', '取消'], // dropDown 属性
    'dropDownView.background': '#fafafa', // dropDownView.xxx 配置下拉容器属性
    'dateTimePane.type': 'date' // dateTimePane.xxx 配置日期时间面板属性
});

对于日期范围选择组件，请使用 `dateRangePane.xxx` 来配置日期面板属性：

dateRangePicker.setDropDownConfig({
    'dateRangePane.type': 'date' // dateRangePane.xxx 配置日期时间面板属性
});

欢迎交流 service@hightopo.com