odoo自定义widget组件两种方式

odoo 自定义一个widget

方式一

js

crossnow.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' operatorconst 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>