自定义字段¶

继承现有的字段组件¶

让我们以一个示例来说明如何扩展 BooleanField，以创建一个复选框被勾选时显示红色”Late!”的布尔字段。

创建一个新组件，继承所需的字段组件。

late_order_boolean_field.js¶

import { registry } from "@web/core/registry";
import { BooleanField } from "@web/views/fields/boolean/boolean_field";
import { Component, xml } from "@odoo/owl";

class LateOrderBooleanField extends BooleanField {}
LateOrderBooleanField.template = "my_module.LateOrderBooleanField";

创建字段模板。

组件使用名为 my_module.LateOrderBooleanField 的新模板。通过继承 BooleanField 的当前模板来创建它。

late_order_boolean_field.xml¶

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <t t-name="my_module.LateOrderBooleanField" t-inherit="web.BooleanField">
        <xpath expr="//CheckBox" position="after">
              <span t-if="props.value" class="text-danger"> Late! </span>
        </xpath>
    </t>
</templates>

将组件注册到字段注册表中。

late_order_boolean_field.js¶

registry.category("fields").add("late_boolean", LateOrderBooleanField);

在视图架构中，将小部件作为字段的属性添加。
```
<field name="somefield" widget="late_boolean"/>
```

创建一个新的字段组件¶

假设我们想要创建一个字段，用于以红色显示简单文本。

创建一个代表我们新字段的新 Owl 组件

my_text_field.js¶

import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Component, xml } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyTextField extends Component {

    /**
    * @param {boolean} newValue
    */
    onChange(newValue) {
        this.props.update(newValue);
    }
}

MyTextField.template = xml`
    <input t-att-id="props.id" class="text-danger" t-att-value="props.value" onChange.bind="onChange" />
`;
MyTextField.props = {
    ...standardFieldProps,
};
MyTextField.supportedTypes = ["char"];

导入的 standardFieldProps 包含由 View 传递的标准属性，例如用于更新值的 update 函数、模型中字段的 type、readonly 布尔值等。

在同一文件中，将组件注册到字段注册表中。
my_text_field.js¶
```
registry.category("fields").add("my_text_field", MyTextField);
```
这将架构中的小部件名称映射到其实际组件。
在视图架构中，将小部件作为字段的属性添加。
```
<field name="somefield" widget="my_text_field"/>
```

Edit on GitHub