Question

我想在odoo 9中的自定义模块的树形视图中将图像放在按钮内。

我在my_module.xml中有两个按钮：

<?xml version="1.0"?>
<openerp>
    <data>
        <record id="view_my_module_tree" model="ir.ui.view">
            <field name="name">my.module.tree</field>
            <field name="model">my.module</field>
            <field name="type">tree</field>
            <field name="arch" type="xml">
                <tree string="my_module_tree" create="false" delete="false">
                    <button name="button_form" icon="cat" type="object"/>
                    <button name="button_form" icon="dog" type="object"/>                   
                </tree>
            </field>
        </record>  
    </data>
</openerp>

如果图标'cat.png'和dog.png'在'addons / web / static / src / img / icons /'里面，那就有效。但是我想把这个图标放在我的自定义模块中。

我创建了'my_module / static / src / img / icons /'层次结构并将两个图像放在里面，但它们都没有出现在按钮中。

我做错了什么？我需要在openerp.py文件中放一些东西吗？

编辑：我试过这个

<button name="button_form" type="object" icon="/my_module/static/src/img/icons/cat.png"/>

但它不起作用。如果我在浏览器DevTools中看到，我可以检查html代码：

<img src="http://localhost:8069/web/static/src/img/icons//my_module/static/src/img/icons/cat.png.png">

这与WidgetButton的源代码有关（它附加到'/ web / static / src / img / icons /'你的图像路径，然后在末尾添加'.png'但当然，这不是解决问题。

Answer 1

据我所知，您必须直接使用指向该图标的链接，因为odoo已将您的网址附加到生成的img标记前面，假设您正在运行localhost:8069标记<button name="print_report" context="{'open_purchase': True}" string="Print" type="object" icon="/my_module/static/src/img/icons/images.png" class="oe_highlight"/>您的本地主机端口为8069

var WidgetButton = common.FormWidget.extend({
    template: 'WidgetButton',
    init: function(field_manager, node) {
        node.attrs.type = node.attrs['data-button-type'];
        this._super(field_manager, node);
        this.force_disabled = false;
        this.string = (this.node.attrs.string || '').replace(/_/g, '');
        if (JSON.parse(this.node.attrs.default_focus || "0")) {
            // TODO fme: provide enter key binding to widgets
            this.view.default_focus_button = this;
        }
        if (this.node.attrs.icon) {
            // if the icon isn't a font-awesome one, find it in the icons folder
            this.fa_icon = this.node.attrs.icon.indexOf('fa-') === 0;
            if (!this.fa_icon && (! /\//.test(this.node.attrs.icon))) {
                this.node.attrs.icon = '/web/static/src/img/icons/' + this.node.attrs.icon + '.png';
            }
        }
},

这是我机器上的adobe pdf图标

的屏幕截图

如果您阅读source code，就会明白为什么它不起作用。该文件还定义了odoo中不同视图的所有可用核心模板，因此您可以在不了解特定标记的工作原理时随时返回并引用它。

'(! /\//.test'

if语句测试以查看图标是否是字体真棒图标，如果它不是字体真棒图标并且它不包含任何斜杠（'/web/static/src/img/icons/' + this.node.attrs.icon + '.png'测试），那么它将使用路径你提供了else，它会使用路径.png并将.png附加到路径的末尾，这意味着该文件夹中只有WidgetButton个文件可以用作图标

在文件底部，您可以看到新窗口小部件button在视图中注册为core.form_tag_registry.add('button', WidgetButton);标记的位置。

1446<t t-name="WidgetButton">
1447     <button type="button" t-att-class="widget.is_stat_button ? 'oe_stat_button btn btn-default' : 'oe_button oe_form_button ' + (widget.node.att     rs.class ? widget.node.attrs.class : '')"
1448         t-att-style="widget.node.attrs.style"
1449         t-att-tabindex="widget.node.attrs.tabindex"
1450         t-att-autofocus="widget.node.attrs.autofocus"
1451         t-att-accesskey="widget.node.attrs.accesskey">
1452         <img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
1453         <div t-if="widget.is_stat_button and widget.icon_class" t-att-class="widget.icon_class"></div>
1454         <span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
1455         <div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
1456     </button>
1457 </t>

如果您对如何实现按钮以及如何解析其属性以生成html感兴趣，您还可以阅读来源here

从第1446行到第1457行

<img>

第1452行告诉我们，如果窗口小部件不是统计按钮（用于计数）并且它的图标属性也已设置，那么将生成'_s'标记，其src为'_s' +值的图标。

qweb稍后会被评估为您当前的网址，其中包含相应的端口，具体取决于您运行Odoo的位置，创建新会话时，位于此处的源代码default_dict具有名为._s的字典，用于存储一些参数

所以origin设置为/** * Setup a session */ session_bind: function(origin) { var self = this; this.setup(origin); qweb.default_dict._s = this.origin; this.uid = null; this.username = null; this.user_context= {}; this.db = null; this.module_loaded = {}; _(this.module_list).each(function (mod) { self.module_loaded[mod] = true; }); this.active_id = null; return this.session_init(); }, /**，这是您最初启动odoo服务器时的当前网址

{{1}}

编辑：对于阅读此内容的任何人来说，此解决方案不适用于列表视图中的图标（Odoo的树视图）。我已经向Odoo 8提交了PR来修复此问题。（希望它会被合并并发送给Odoo 9）

Answer 2

最后，解决方案。

这是一个odoo错误。 “表单”视图和“列表视图”按钮中的自定义按钮图标之间存在不一致。

更多信息： https://github.com/odoo/odoo/pull/13983

在他们解决问题之前，有3种解决方案可用：

解决方案1：邋ha hacks

改变这个：

<button name="button_form" icon="cat" type="object"/>

为此：

<button name="button_form" icon="../../../../../my_module/static/src/img/icons/cat" type="object"/>

解决方案2：官方图标odoo文件夹中的图标

将图标放在文件夹/ web / static / src / img / icons

中

解决方案3：手动修复错误

编辑文件：addons / web / static / src / xml / base.xml

改变这个：

<button t-name="ListView.row.button" type="button"
    t-att-title="widget.string" t-att-disabled="disabled || undefined"
    t-att-class="disabled ? 'oe_list_button_disabled' : ''"
    ><img t-attf-src="#{prefix}/web/static/src/img/icons/#{widget.icon}.png"
    t-att-alt="widget.string"/></button>

为此：

<button t-name="ListView.row.button" type="button"
    t-att-title="widget.string" t-att-disabled="disabled || undefined"
    t-att-class="disabled ? 'oe_list_button_disabled' : ''"
    ><t t-if="!widget.icon.indexOf('fa-') == 0"><t t-if="!/\//.test(widget.icon)"><img t-attf-src="#{prefix}/web/static/src/img/icons/#{widget.icon}.png" /></t></t>
    <t t-if="/\//.test(widget.icon)"><img t-attf-src="#{widget.icon}" /></t>
    <i t-if="widget.icon.indexOf('fa-') == 0" t-attf-class="fa #{widget.icon}" t-att-title="widget.string"/></button>

如何在odoo 9中的自定义模块内的树形视图中添加图像或图标？

2 个答案: