Javascript openerp web客户端如何自定义字段(扩展基本字段小部件)
我是Javascript openerp web客户端如何自定义字段(扩展基本字段小部件),javascript,web,field,openerp,Javascript,Web,Field,Openerp,我是openerp的web开发新手,希望能得到一些帮助。我想创建一个计数计时器小部件,例如在一个文本框中,带有开始和停止按钮(包括在我的新自定义字段中或单独的字段中) 我制作了一个小的javascript函数来计算时间 我应该通过扩展basicFieldChar来创建一个新的小部件吗?是否创建新类型的字段 我应该将计数器代码放在哪里,以及如何在char字段(或新类型的字段)上显示计数器代码 我找到了一些关于如何使用类似openerp.web.form.FieldChar的东西进行扩展的文档: o
openerp
的web开发新手,希望能得到一些帮助。我想创建一个计数计时器小部件,例如在一个文本框中,带有开始和停止按钮(包括在我的新自定义字段中或单独的字段中)
我制作了一个小的javascript
函数来计算时间
我应该通过扩展basicFieldChar
来创建一个新的小部件吗?是否创建新类型的字段
我应该将计数器代码放在哪里,以及如何在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的
doc关于界面如何工作
提前谢谢
我就在这里:
模块:网络升级程序
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>
var计数器=0;
var分钟=0;
var小时=0;
无功定时器;
var-todisplay;
var h2disp;
var-m2disp;
var-s2disp;
函数计数()
{
计数器=计数器+1;//计数器递增1
如果(计数器==60)
{
计数器=0;
分钟=分钟+1;
如果(分钟==60)
{
分钟=0;
小时数=小时数+1
}
}
如果(计数器<10)
{
s2disp=“0”+计数器;
}
其他的
{
s2disp=计数器;
}
如果(分钟<10)
{
m2disp=“0”+分钟;
}
其他的
{
m2disp=分钟;
}
如果(小时<10)
{
h2disp=“0”+小时;
}
其他的
{
h2disp=小时;
}
todisplay=h2disp+“:”+m2disp+“:”+s2disp;
document.getElementById(“计时器容器”).innerHTML=todisplay;
}
00:00:00
停止定时器
连续定时器
我设法将计时器作为试用的开场白,计时器计数,显示器更新等
现在我想让它成为一个openerp字段,我可以在表单中使用它:
我已经接近了,但按钮已经不起作用了
这是我的密码:
模块名称为web\u示例:
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>
模板>
div t-name=“web\u example.action”class=“oe\u web\u example”>
p>
按钮类型=“按钮”id=“bstart”>开始
h4 class=“oe\u web\u示例\u timer”id=“extimer”>00:00:00
/p>
按钮类型=“按钮”id=“bstop”>停止
/div>
/模板>
/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>
web_示例_类
web_示例_类
web_示例.form
web_示例_类
形式
您走在正确的轨道上。看看这里的文档:最后他们碰巧有一个计时器小部件的示例!:我试过了,但似乎很有解释力。谢谢你的回答,蒂莫西。我正在尝试你给我举的网络例子。在出现一些问题(menuitem标记解析错误)后,我设法显示计数器(这是一个开始!!!),但是按钮没有调用函数…它在6.1上工作吗?(我想知道你链接到我的文档位于主干)我试图简化代码(一个按钮和一个警报),但不起作用。似乎“事件”不起作用或没有被倾听…有什么想法吗?提前谢谢,我还在继续,所以这很好