在javascript中，有好多途径解决同一问题，因为ODOO框架是可扩展的，一些常见的问题都会 有一个很好的标准解决方案，标准解决方案的优点是便于理解。
请记住，使用 JS 自定义 odoo 的第一条原则是： 尝试在 python 中进行。这可能看起来很奇怪，但是 python 框架的可扩展性非常好，许多行为只需轻轻一点 xml 或 python 就可以完成。这通常比使用 JS 具有更低的维护成本。
1、创建一个新的字段widget
这是一个非常常见的用例：我们希望以一种非常特定（可能取决于业务）的方式在表单视图中显示一些信息。例如，假设我们要根据某些业务条件更改文本颜色。
这可以通过三个步骤完成：创建一个新的小部件，在字段注册表中注册它，然后将小部件添加到表单视图中的字段.
创建一个新的widget：
可以通过扩展一个widget来完成：

var FieldChar = require('web.basic_fields').FieldChar;
var CustomFieldChar = FieldChar.extend({
    _renderReadonly: function () {
        // implement some custom logic here
    },
});

在字段注册表中注册它：
Web 客户端需要知道widget名称与其实际类之间的映射。这是由注册表完成的：

var fieldRegistry = require('web.field_registry');
fieldRegistry.add('my-custom-field', CustomFieldChar);

在表单视图中添加小部件

<field name="somefield" widget="my-custom-field"/>

这里需要注意一点，只有表单、列表和看板视图使用此字段widget注册表。这些视图紧密集成，因为列表和看板视图可以出现在表单视图中）。
2、修改现有字段小部件
另一个做法是我们想要修改现有的字段widget。例如，odoo 中的 voip 插件需要修改 FieldPhone widget,以添加在 voip 上轻松拨打给定号码的可能性。这是通过包含 FieldPhone widget来完成的，因此无需更改任何现有的表单视图。

字段 widget（AbstractField 的（子类）实例）与所有其他小部件一样，因此可以对其进行猴子修补。这看起来像这样：

var basic_fields = require('web.basic_fields');
var Phone = basic_fields.FieldPhone;

Phone.include({
    events: _.extend({}, Phone.prototype.events, {
        'click': '_onClick',
    }),

    _onClick: function (e) {
        if (this.mode === 'readonly') {
            e.preventDefault();
            var phoneNumber = this.value;
            // call the number on voip...
        }
    },
});

无需将widget再添加到注册表，因为它已经注册。
从界面修改主小部件
另一个常见的做法是需要从用户界面自定义一些元素。例如，在主菜单中添加一条消息。在这种情况下，通常的过程是再次包含widget。这是唯一的方法，因为这些小部件没有注册表。

这通常通过如下代码完成：

var HomeMenu = require(‘web_enterprise.HomeMenu’);

HomeMenu.include({
render: function () {
this._super();
// do something else here…
},
});

创建一个新视图
创建一个新视图是一个高级应用. 本文仅强调可能需要执行的步骤。
增加一个新的视图到ir.ui.view的字段类型

class View(models.Model):
    _inherit = 'ir.ui.view'
    type = fields.Selection(selection_add=[('map', "Map")])

将新的视图类型添加到ir_act_window_view模型的view_mode字段中:

class ActWindowView(models.Model):
    _inherit = 'ir.actions.act_window.view'
    view_mode = fields.Selection(selection_add=[('map', "Map")])

创建构成新视图的四个主要部分（in javascript）
包括一个视图（工厂类：AbstractView子类），一个渲染器（派生于AbstractRenderer），一个控制器（派生于AbstractController）和一个模型（派生于 AbstractModel)，建议从扩展基类（superclasses）开始。

var AbstractController = require('web.AbstractController');
var AbstractModel = require('web.AbstractModel');
var AbstractRenderer = require('web.AbstractRenderer');
var AbstractView = require('web.AbstractView');

var MapController = AbstractController.extend({});
var MapRenderer = AbstractRenderer.extend({});
var MapModel = AbstractModel.extend({});

var MapView = AbstractView.extend({
    config: {
        Model: MapModel,
        Controller: MapController,
        Renderer: MapRenderer,
    },
});

在注册表中添加视图类型：
通常，需要更新视图类型和实际类之间的映射

var viewRegistry = require('web.view_registry');
viewRegistry.add('map', MapView);

使用这4个类：
View类需要解析arch字段（视图字段）并设置其他三个类. Renderer渲染器负责在用户界面中表示数据,
模型应该与服务器对话,调取数据及处理. Controller 进行协调，与web客户端对话…
在数据库中建立一些视图：

<record id="customer_map_view" model="ir.ui.view">
    <field name="name">customer.map.view</field>
    <field name="model">res.partner</field>
    <field name="arch" type="xml">
        <map latitude="partner_latitude" longitude="partner_longitude">
            <field name="name"/>
        </map>
    </field>
</record>

自定义修改已经存在的视图：
假设我们需要创建通用视图的自定义版本，例如，一个看板视图需要一些扩展的widget控件显示(如带状条) (去显示一些特定的信息). 在这个例子中, 通过三步来实现，第一步是扩展看板视图（这也可能意味着扩展控制器/渲染器和/或模型），注册视图，最后，在看板中使用它， (一个典型的例子是帮助台dashboard).
extending a view:
如：

var HelpdeskDashboardRenderer = KanbanRenderer.extend({
    ...
});
var HelpdeskDashboardModel = KanbanModel.extend({
    ...
});
var HelpdeskDashboardController = KanbanController.extend({
    ...
});
var HelpdeskDashboardView = KanbanView.extend({
    config: _.extend({}, KanbanView.prototype.config, {
        Model: HelpdeskDashboardModel,
        Renderer: HelpdeskDashboardRenderer,
        Controller: HelpdeskDashboardController,
    }),
});

注册:

var viewRegistry = require('web.view_registry');
viewRegistry.add('helpdesk_dashboard', HelpdeskDashboardView);

在实际的视图中使用:
我们现在需要通过web client在指定的视图上使用我们自定义的类，这是一个特定于web客户端的问题，
从服务器的角度来看，正确的方法是在根节点上使用一个特殊的属性js_class（有一天将重命名为widget，因为这真的不是一个好名字）:

<record id="helpdesk_team_view_kanban" model="ir.ui.view" >
    ...
    <field name="arch" type="xml">
        <kanban js_class="helpdesk_dashboard">
            ...
        </kanban>
    </field>
</record>

注: 我们可以改变视图的arch结构，但无论怎样，从服务器的角度来讲，它仍然是一个视图，需要加上

                                                                           中亿丰数字科技有限公司 姜振建