odoo17核心概念view6——用js

本文主要是介绍odoo17核心概念view6——用js_class扩展formview，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是view系列的第六篇文章，我们学习用js_class来扩展view
学习odoo的一大窍门就是抄，因为odoo本身就是一个庞大的代码库，抄过来，改改就能用

1、找一个js_class的案例

搜索js_class,出现一堆结果，随便看一个

<form string="Account Entry" js_class="account_move_form">

搜索account_move_form 找到对应的js文件

/** @odoo-module **/import { registry } from "@web/core/registry";
import { createElement, append } from "@web/core/utils/xml";
import { Notebook } from "@web/core/notebook/notebook";
import { formView } from "@web/views/form/form_view";
import { FormCompiler } from "@web/views/form/form_compiler";
import { FormRenderer } from "@web/views/form/form_renderer";
import { FormController } from '@web/views/form/form_controller';
import { useService } from "@web/core/utils/hooks";export class AccountMoveController extends FormController {setup() {super.setup();this.account_move_service = useService("account_move");}async deleteRecord() {if ( !await this.account_move_service.addDeletionDialog(this, this.model.root.resId)) {return super.deleteRecord(...arguments);}}
};export class AccountMoveFormNotebook extends Notebook {async changeTabTo(page_id) {if (this.props.onBeforeTabSwitch) {await this.props.onBeforeTabSwitch(page_id);}this.state.currentPage = page_id;}
}
AccountMoveFormNotebook.template = "account.AccountMoveFormNotebook";
AccountMoveFormNotebook.props = {...Notebook.props,onBeforeTabSwitch: { type: Function, optional: true },
}
export class AccountMoveFormRenderer extends FormRenderer {async saveBeforeTabChange() {if (this.props.record.isInEdition && await this.props.record.isDirty()) {const contentEl = document.querySelector('.o_content');const scrollPos = contentEl.scrollTop;await this.props.record.save();if (scrollPos) {contentEl.scrollTop = scrollPos;}}}
}
AccountMoveFormRenderer.components = {...FormRenderer.components,AccountMoveFormNotebook: AccountMoveFormNotebook,
}
export class AccountMoveFormCompiler extends FormCompiler {compileNotebook(el, params) {const originalNoteBook = super.compileNotebook(...arguments);const noteBook = createElement("AccountMoveFormNotebook");for (const attr of originalNoteBook.attributes) {noteBook.setAttribute(attr.name, attr.value);}noteBook.setAttribute("onBeforeTabSwitch", "() => __comp__.saveBeforeTabChange()");const slots = originalNoteBook.childNodes;append(noteBook, [...slots]);return noteBook;}
}export const AccountMoveFormView = {...formView,Renderer: AccountMoveFormRenderer,Compiler: AccountMoveFormCompiler,Controller: AccountMoveController,
};registry.category("views").add("account_move_form", AccountMoveFormView);

通过上面的代码，我们看到它扩展了Renderer，Compiler，Controller三个组件，
而其他的属性通过…formView 解构赋值，值得注意的是这一句一定要放在最上面，因为后面的值会覆盖前面的，最后将这个新的结构体注册到注册表中。

2、看看formView原版

我们看看原来的formView是怎么写的，从代码看，formView是一个字典，包含了诸多属性

    type: "form",			                          视图类型		display_name: "Form",                       显示名称multiRecord: false,                            是否支持多行searchMenuTypes: [],                         搜索菜单类型，什么鬼？Controller: FormController,                 Controller组件（重要）Renderer: FormRenderer,					renderer组件（重要）ArchParser: FormArchParser,				arch解析器，（重要）Model: RelationalModel,						model （重要）Compiler: FormCompiler,					编译器（将xml文件编译成qweb模板，重要）buttonTemplate: "web.FormView.Buttons",    button模板

通常对视图的扩展就是修改它的Controller和Render组件。修改完之后生成一个新的字典，然后生成一个新的名字注册到注册表中。然后在js_class中指定这个名称，前端解析xml的时候就会根据这个js_class名称去注册表中查找对应的信息，然后渲染页面。

/** @odoo-module **/import { registry } from "@web/core/registry";
import { RelationalModel } from "@web/model/relational_model/relational_model";
import { FormRenderer } from "./form_renderer";
import { FormArchParser } from "./form_arch_parser";
import { FormController } from "./form_controller";
import { FormCompiler } from "./form_compiler";export const formView = {type: "form",					display_name: "Form",multiRecord: false,searchMenuTypes: [],Controller: FormController,Renderer: FormRenderer,ArchParser: FormArchParser,Model: RelationalModel,Compiler: FormCompiler,buttonTemplate: "web.FormView.Buttons",props: (genericProps, view) => {const { ArchParser } = view;const { arch, relatedModels, resModel } = genericProps;const archInfo = new ArchParser().parse(arch, relatedModels, resModel);return {...genericProps,Model: view.Model,Renderer: view.Renderer,buttonTemplate: genericProps.buttonTemplate || view.buttonTemplate,Compiler: view.Compiler,archInfo,};},
};registry.category("views").add("form", formView);

3、做一个对form视图简单的扩展

js文件

/** @odoo-module **/import { registry } from "@web/core/registry";
import { formView } from "@web/views/form/form_view";
import { FormController } from '@web/views/form/form_controller';export class DemoFormController extends FormController {
};DemoFormController.template = "crax_demo.demo_form_controller"export const CraxDemoFormView = {...formView,Controller: DemoFormController,
};registry.category("views").add("crax_demo_form_view", CraxDemoFormView);

xml文件

<?xml version="1.0" encoding="UTF-8"?>
<templates><t t-name="crax_demo.demo_form_controller" t-inherit="web.FormView" t-inherit-mode="primary"><xpath expr="//div[hasclass('o_form_view_container')]" position="inside"><div style="color:red;">hello world</div></xpath></t>
</templates>