odoo自定义widget组件两种方式

odoo 自定义一个widget

方式一

js

odoo.define('your_module.custom_widget', function (require) {
    "use strict";

    const core = require('web.core');
		
    const QWeb = core.qweb;
    const {useState, useRef} = owl.hooks;

    // 方式1 函数方式
    const AbstractField = require('web.AbstractField'); //这种xml不能加owl=1  否则报模板找不到
    const fieldRegistry = require('web.field_registry');
    // 实例化声明 否则报 You can only instanciate objects with the 'new' operator
    const your_custom_widget = AbstractField.extend({
        template: 'your_module.custom_widget',
        init: function (parent, options) {
            this._super.apply(this, arguments);
             初始化代码
        },
        start: function () {
            return this._super.apply(this, arguments);
             启动代码
        },
        render: function() {
            QWeb.add_template('./dynamic_progress_bar.xml');
        },
         其他自定义方法
    });

    fieldRegistry.add('your_module.custom_widget', your_custom_widget);

    return {
        your_custom_widget: your_custom_widget,
    };

    //  方式2 类的方式声明
    // const AbstractField = require('web.AbstractFieldOwl');  //这种xml必须加owl=1 否则报模板找不到
    // const fieldRegistry = require('web.field_registry_owl');

    // class FieldValue11 extends AbstractField {
    //     static template = 'your_module.custom_widget';

    //     constructor(...args) {
    //         super(...args);
    //     }

    //     setup() {
    //         super.setup();
    //         this.state = useState({
    //             data: {},
    //             showMap: false,
    //             address: ""
    //         });
    //     }


    //     mounted() {
    //         console.log(this,11122);
    //     }
    // }

    // fieldRegistry.add('your_module.custom_widget', FieldValue11);

    // return {
    //     FieldValue11: FieldValue11,
    // };
});

xml不带owl

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <div t-name="your_module.custom_widget">
        <div class="test">111</div>
    </div>
</templates>

xml带owl

注意要加owl="1" 否则报模板找不到
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <div t-name="your_module.custom_widget" owl="1"> 
        <div class="test">111</div>
    </div>
</templates>

最后 注册在__manifest__.py文件中，并在view<field name="xxx" widget="your_module.custom_widget"/>使用