个人中心
gpt4 book ai didi

javascript - openerp web 客户端如何自定义字段(扩展基本字段小部件)

转载 作者：搜寻专家 更新时间：2023-11-01 04:32:50 25 4
gpt4 key购买 nike

我是 openerp 的网络开发新手，希望得到一些帮助。我想创建计数计时器小部件，例如在 textbox 中，带有开始和停止按钮(包括在我的新自定义字段中或单独)。

我做了一个小的 javascript 函数来计算时间。

我应该通过扩展基本的 FieldChar 来创建一个新的小部件吗？创建一个新类型的字段？

我应该把我的计数器代码放在哪里，以及如何在 char 字段(或新类型的字段)上显示它？

我找到了一些关于如何使用 openerp.web.form.FieldChar 之类的东西进行扩展的文档:

openerp.web_mymodule = function(openerp) {
  openerp.web.form.Field.include({
    init: function(view, node) {
        console.log('mine');
        this._super(view, node);
    }
  });
}

我需要一些指导来将所有这些放在一起，即使是关于界面如何工作的 openerp 文档也是如此。

提前致谢

这是我所在的地方:模块:web_uptimer

web_uptimer.js:

openerp.web_uptimer = function (openerp)
{  
    openerp.web.form.widgets.add('uptimer', 'openerp.web_uptimer.CountUp');
    openerp.web_uptimer.CountUp = openerp.web.form.FieldChar.extend(
        {
        template : "uptimer.template",
        init: function (view, code) {
            this._super(view, code);
            console.log('counting...');
            alert('counting...');
        }
    });
}

web_uptimer.xml:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="uptimer.template">
            <html>
            </html>  
</t>
</templates>

我的快速计时测试:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            var counter = 0;
            var minutes = 0;
            var hours = 0;
            var timer;
            var todisplay;
            var h2disp;
            var m2disp;
            var s2disp;

            function countUP ()
            {
                counter = counter + 1;//increment the counter by 1
                if(counter == 60)
                {
                    counter = 0;
                    minutes = minutes + 1;
                    if(minutes == 60)
                    {
                        minutes = 0;
                        hours = hours + 1
                    }
                }
                if(counter < 10)
                {
                    s2disp = "0" + counter;
                }
                else
                {
                    s2disp = counter;
                }
                if(minutes < 10)
                {
                    m2disp = "0" + minutes;
                }
                else
                {
                    m2disp = minutes;
                }
                if(hours < 10)
                {
                    h2disp = "0" + hours;
                }
                else
                {
                    h2disp = hours;
                }
                todisplay = h2disp + ":" + m2disp + ":" + s2disp;
                document.getElementById("timer_container").innerHTML = todisplay;
            }
        </script>
    </head>
    <body onload='timer=setInterval("countUP()", 1000 );'>
        <div id="timer_container">00:00:00</div>
        <div>
            <button onclick='clearInterval(timer);'>Stop Timer</button>
            <button onclick='timer=setInterval("countUP()", 1000 );'>Continue Timer</button>
        </div>
    </body>
</html>

最佳答案

我设法将我的计时器作为一个 openerp Action 进行试用，计时器开始计数，显示更新等...

现在我希望它成为我可以在表单中使用的 openerp 字段:

我快要成功了，但按钮不再起作用了。

这是我的代码:

模块名称是 web_example:

src/js/first_module.js:

openerp.web_example = function (openerp) {
        openerp.web.form.widgets.add('FieldUpTimer',     'openerp.web.form.FieldUpTimer');
        openerp.web.form.FieldUpTimer = openerp.web.form.FieldChar.extend({
         template: 'web_example.action',
        init: function () {
            this._super.apply(this, arguments);
            this._start = null;
            this._watch = null;

        },

    start: function() {
        this.$element.find('button#bstart').click(_.bind(this.mystart, this));
        this.$element.find('button#bstart').click(this.mystart);
        this._start = null;
    },

    countUP: function (counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp)
            {
        var h, m, s;
        // Subtracting javascript dates returns the difference in milliseconds
        var diff = new Date() - this._start;
        s = diff / 1000;
        m = Math.floor(s / 60);
        s -= 60*m;
        h = Math.floor(m / 60);
        m -= 60*h;
                todisplay = _.str.sprintf("%02d:%02d:%02d", h, m, s);
                document.getElementById("extimer").innerHTML = todisplay;
            },

    mystart: function () {
            alert('pffff ça marche');
            this.$element.addClass('oe_web_example_started')
                            .removeClass('oe_web_example_stopped');
            //timer=setInterval(this.countUP(counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp), 1000 );
            this._start = new Date();
                    this._watch = setInterval(this.proxy('countUP'),33);
    },



            destroy: function () {
        if (this._watch) {
            clearInterval(this._watch);
        }
        this._super();
    }
 });

};

src/css/web_example.css:

.openerp .oe_web_example {
     color: black;
     background-color: white;
     height: 100%;
 }
.openerp .oe_web_example h4 {
    margin: 0;
    font-size: 100%;
}
.openerp .oe_web_example.oe_web_example_started .oe_web_example_start button,
.openerp .oe_web_example.oe_web_example_stopped .oe_web_example_stop button { display: none },

src/xml/web_example.xml:我删除了 < 因为我没有(快速)找到正确显示 html 代码的方法

templates>
    div t-name="web_example.action" class="oe_web_example">
    p>
        button type="button" id="bstart">start</button>

        h4 class="oe_web_example_timer" id="extimer">00:00:00</h4>
    /p>
    button type="button" id="bstop">Stop</button>
/div>
/templates>

/web_example.xml

<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
    <record model="ir.actions.act_window" id="action_web_example_form">
        <field name="name">web_example_class</field>
        <field name="res_model">web_example_class</field>
    </record>

    <record model="ir.ui.view" id="action_web_example_form_view">
        <field name="name">web_example.form</field>
        <field name="model">web_example_class</field>
        <field name="type">form</field>
        <field name="arch" type="xml">
            <form string="Web Example View">
                <field name="test2" widget="FieldUpTimer"/>
            </form>
        </field>
    </record>

<menuitem name="WEB EXAMPLE" action="action_web_example_form" id="web_example_menu"/>
</data>
</openerp>

关于javascript - openerp web 客户端如何自定义字段(扩展基本字段小部件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14258046/

25 4 0
文章推荐： javascript - 鼠标悬停时的传单弹出窗口删除了点击事件
文章推荐： javascript - 什么时候需要在 Javascript 中设置类的 'prototype.constructor' 属性？
文章推荐： javascript - Internet Explorer 中的 mousemove 问题
文章推荐： javascript - 向下冒泡自定义事件
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com