Jér*_*ton 5 javascript field openerp web
我是openerp网络开发人员的新手,我很感激一些帮助.我想创建计数计时器小部件,例如在a中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);
}
});
}
Run Code Online (Sandbox Code Playgroud)
我需要一些指导,即使是openerp's关于界面如何工作的文档,也要把所有这些放在一起
提前致谢
这就是我的位置:模块: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...');
}
});
}
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
我的快速计时计时器测试:
<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>
Run Code Online (Sandbox Code Playgroud)
我设法将计时器作为 openerp 操作进行试用,计时器计数,显示更新等......
\n\n现在我希望它成为一个 openerp 字段,我可以在表单中使用它:
\n\n我已经接近它了,但按钮不再起作用了。
\n\n这是我的代码:
\n\n模块名称是 web_example:
\n\nsrc/js/first_module.js:
\n\nopenerp.web_example = function (openerp) {\n openerp.web.form.widgets.add(\'FieldUpTimer\', \'openerp.web.form.FieldUpTimer\');\n openerp.web.form.FieldUpTimer = openerp.web.form.FieldChar.extend({\n template: \'web_example.action\',\n init: function () {\n this._super.apply(this, arguments);\n this._start = null;\n this._watch = null;\n\n },\n\n start: function() {\n this.$element.find(\'button#bstart\').click(_.bind(this.mystart, this));\n this.$element.find(\'button#bstart\').click(this.mystart);\n this._start = null;\n },\n\n countUP: function (counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp)\n {\n var h, m, s;\n // Subtracting javascript dates returns the difference in milliseconds\n var diff = new Date() - this._start;\n s = diff / 1000;\n m = Math.floor(s / 60);\n s -= 60*m;\n h = Math.floor(m / 60);\n m -= 60*h;\n todisplay = _.str.sprintf("%02d:%02d:%02d", h, m, s);\n document.getElementById("extimer").innerHTML = todisplay;\n },\n\n mystart: function () {\n alert(\'pffff \xc3\xa7a marche\');\n this.$element.addClass(\'oe_web_example_started\')\n .removeClass(\'oe_web_example_stopped\');\n //timer=setInterval(this.countUP(counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp), 1000 );\n this._start = new Date();\n this._watch = setInterval(this.proxy(\'countUP\'),33);\n },\n\n\n\n destroy: function () {\n if (this._watch) {\n clearInterval(this._watch);\n }\n this._super();\n }\n });\nRun Code Online (Sandbox Code Playgroud)\n\n};
\n\nsrc/css/web_example.css:
\n\n.openerp .oe_web_example {\n color: black;\n background-color: white;\n height: 100%;\n }\n.openerp .oe_web_example h4 {\n margin: 0;\n font-size: 100%;\n}\n.openerp .oe_web_example.oe_web_example_started .oe_web_example_start button,\n.openerp .oe_web_example.oe_web_example_stopped .oe_web_example_stop button { display: none },\nRun Code Online (Sandbox Code Playgroud)\n\nsrc/xml/web_example.xml:\ni 删除 < 因为我没有(很快)找到正确显示 html 代码的方法
\n\ntemplates>\n div t-name="web_example.action" class="oe_web_example">\n p>\n button type="button" id="bstart">start</button>\n\n h4 class="oe_web_example_timer" id="extimer">00:00:00</h4>\n /p>\n button type="button" id="bstop">Stop</button>\n/div>\n/templates>\nRun Code Online (Sandbox Code Playgroud)\n\n/web_example.xml
\n\n<?xml version="1.0" encoding="utf-8"?>\n<openerp>\n<data>\n <record model="ir.actions.act_window" id="action_web_example_form">\n <field name="name">web_example_class</field>\n <field name="res_model">web_example_class</field>\n </record>\n\n <record model="ir.ui.view" id="action_web_example_form_view">\n <field name="name">web_example.form</field>\n <field name="model">web_example_class</field>\n <field name="type">form</field>\n <field name="arch" type="xml">\n <form string="Web Example View">\n <field name="test2" widget="FieldUpTimer"/>\n </form>\n </field>\n </record>\n\n<menuitem name="WEB EXAMPLE" action="action_web_example_form" id="web_example_menu"/>\n</data>\n</openerp> \nRun Code Online (Sandbox Code Playgroud)\n