如何在Odoo中导入Ext Js库并使用其提供的网页控件

1. 准备Ext JS资源并引入Odoo模块 #

• 下载对应版本的Ext JS资源包，将完整资源存放到自定义模块的static/lib/extjs/目录下，保留Ext JS原有目录结构，不要打乱css、js、静态资源的相对路径。
• 在模块的manifest文件（__manifest__.py）的assets配置项中按顺序引入Ext JS资源，示例配置如下：

'assets': {
    'web.assets_backend': [
        # 先加载Ext JS主题样式
        '/你的模块名/static/lib/extjs/classic/theme-triton/resources/theme-triton-all.css',
        # 再加载Ext JS核心脚本
        '/你的模块名/static/lib/extjs/build/ext-all.js',
        # 最后加载自定义的Ext JS组件调用脚本
        '/你的模块名/static/src/js/ext_widgets.js',
    ],
},

上述路径可根据你使用的Ext JS版本、主题做对应调整。

2. 处理命名冲突 #

Odoo前端默认依赖jQuery和OWL框架，Ext JS的$符号可能和jQuery冲突，需要在Ext JS加载完成后做兼容处理：
在自定义的ext_widgets.js开头添加以下代码：

Ext.onReady(function() {
    Ext.$d = Ext.dom.Query; // 单独存储Ext的选择器对象
    $.noConflict(true); // 释放$控制权归还jQuery
});

3. 挂载Ext JS组件到Odoo视图 #

你可以在自定义视图、QWeb模板、自定义控制器页面中挂载Ext JS控件，以下是在表单视图嵌入Ext Grid的示例：

• 首先在自定义表单视图中添加挂载容器，设置唯一id：

<field name="arch" type="xml">
    <form string="Ext JS测试表单">
        <group>
            <div id="ext_grid_container" style="height: 400px; width: 100%;"/>
        </group>
    </form>
</field>

• 在ext_widgets.js中绑定Odoo视图生命周期，渲染Ext组件：

odoo.define('你的模块名.ext_widgets', function (require) {
    "use strict";
    var FormController = require('web.FormController');
    FormController.include({
        _onViewLoaded: function () {
            this._super.apply(this, arguments);
            // 仅目标视图下渲染Ext组件
            if (this.modelName === '你的业务模型名' && $('#ext_grid_container').length) {
                Ext.create('Ext.grid.Panel', {
                    renderTo: 'ext_grid_container',
                    width: '100%',
                    height: 400,
                    title: 'Ext JS示例表格',
                    store: Ext.create('Ext.data.Store', {
                        fields: ['name', 'value'],
                        data: [
                            {name: '测试项1', value: '123'},
                            {name: '测试项2', value: '456'}
                        ]
                    }),
                    columns: [
                        {text: '名称', dataIndex: 'name', flex: 1},
                        {text: '值', dataIndex: 'value', flex: 1}
                    ]
                });
            }
        }
    });
});

4. 注意事项 #

• Ext JS资源体积较大，非必要不要全局引入，仅在需要用到的视图对应的assets配置中引入，避免拖慢Odoo整体加载速度
• Ext JS组件生命周期要和Odoo视图生命周期绑定，视图销毁时主动调用Ext组件的destroy()方法，避免内存泄漏
• 如需Ext组件和Odoo业务字段交互，可以通过Odoo内置RPC接口调用模型方法，或直接读取Odoo视图字段值做同步更新

内容的提问来源于stack exchange，提问作者Luigi Guadalupi