Odoo10 Javascript Widget操作不工作：ClientWidget不是一个功能

Question

我仍然在学习如何正确添加自己的JavaScript代码。我试图将自己的东西添加到Odoo后端。

我一直在仔细阅读“Building Interface Extensions”指南（https://www.odoo.com/documentation/10.0/howtos/web.html），但它严重不准确或完全过时。

看着像账户，项目Odoo正式模块后，CRM我编写这样的事：

odoo.define('rhp.main', function (require) { 
"use strict"; 

var core = require('web.core'); 
var _t = core._t; 
var _lt = core._lt; 
var Widget = require('web.Widget'); 
var QWeb = core.qweb; 

var Explorer = Widget.extend({ 
    init: function(parent, options) { 
     console.log('Explorer inited'); 
    }, 
    start: function() { 
     console.log('Explorer started'); 
    }, 
}); 

/* NONE OF THESE WORK OK */ 
//core.view_registry.add('exploreraction', Explorer); 
//core.action_registry.add('exploreraction', function() { return new Explorer(); }); 
core.action_registry.add('exploreraction', 'rhp.main.Explorer'); 
//odoo.client_actions.add('exploreraction', Explorer); 

/* "Main loaded" is successfully printed in console */ 
console.log("Main loaded"); 

return { 
    Explorer: Explorer, 
}; 

}); 

我的模块XML数据：

<record id="explorer_action" model="ir.actions.client"> 
    <field name="name">Document Explorer</field> 
    <field name="tag">exploreraction</field> 
    <field name="target">main</field> 
</record> 

<menuitem name="Documents" id="main_docs" /> 
<menuitem name="Document Explorer" id="rhp_explorer" parent="rhp.main_docs" action="rhp.explorer_action"/> 

这是我最新的代码，当我点击菜单项没有任何反应，我得到这个弹出错误：

TypeError: ClientWidget is not a function 

Traceback pas ted here https://pastebin.com/QLCaLwHC

=========================================

编辑：

我添加了模板，像维沙尔Khichadiya的例子：现在加入

<t t-name="exploreraction" > 
    <div id="exploreraction_div"> 
     test 
    </div> 
</t> 

操作是这样的：

core.action_registry.add('exploreraction', Explorer); 

现在，当我浏览到我的菜单项，现在我得到这个错误：

TypeError: this.__getterSetterInternalMap is undefined 

新回溯这里：https://pastebin.com/phrqXFkz

Answer 1

我也是新Odoo和JS，我已经试过的东西，下面是给予：

In your /static/src/js/your_.js file, add the code: 

    odoo.define('zbtoken.map', function (require) { 
     "use strict"; 

    var Widget = require('web.Widget'); 
    var core = require('web.core'); 
    var utils = require('web.utils'); 


    var HomePage = Widget.extend({ 
     template: "HelloJS", 

     init: function(parent) { 
      this._super(parent); 
      console.log("Hello JS, I'm inside of init."); 
     }, 


    start: function() { 
      console.log("Hello JS, I'm inside of start."); 
    }, 
    }); 

    core.action_registry.add('HelloJS', HomePage); 

    return HomePage; 
    }); 

在你/static/src/xml/your_.xml文件：

<?xml version="1.0" encoding="UTF-8"?> 
    <templates xml:space="preserve"> 
     <t t-name="HelloJS"> 
      <div> </div> 
     </t> 
    </templates> 

在你的/ views/your_。xml文件：

<?xml version="1.0" encoding="UTF-8"?> 
    <odoo> 
     <data> 

    <template id="assets_backend" name="petstore" 
     inherit_id="web.assets_backend"> 
     <xpath expr="." position="inside"> 
      <script type="text/javascript"   
      src="/your_module_name/static/src/js/your_js_file.js"> 
      </script> 
     </xpath> 
    </template> 

    <record id="hellojs_id" model="ir.actions.client"> 
     <field name="name">HelloJS</field> 
     <field name="tag">HelloJS</field> 
    </record> 
    <menuitem id="hellojs_menu" 
      name="HelloJS" 
      action="hellojs_id"/> 
    </data> 
    </odoo> 

在清单的.py：

 'data': [ 
    'views/your_.xml file', 
     ], 

    'qweb': ['static/src/xml/your_.xml file'], 

它将工作。请尝试。

Answer 2

您需要通过你的自我设计的模板。

你会在odoo it self中找到参考代码来创建模板。

添加您在清单文件作为 'qweb' 模板文件： “静态/ src目录/ XML/my_template.xml”]

odoo.define('rhp.main', function (require) { 
"use strict"; 

var core = require('web.core'); 
var _t = core._t; 
var _lt = core._lt; 
var Widget = require('web.Widget'); 
var QWeb = core.qweb; 

var Explorer = Widget.extend({ 
    init: function(parent, options) { 
     console.log('Explorer inited'); 
    }, 
    start: function() { 
     console.log('Explorer started'); 
    }, 
}); 
//exploreraction is must be your template name   
core.action_registry.add('exploreraction', Explorer); 

return Explorer; 


}); 

照例a模板代码：

<t t-name="exploreraction" > 
    <div id="my_temp_id"> 
    <div class="ex_button"> 
     <div class="cancle_btn"> 
      <button class="btn btn-danger">Cancle</button> 
     </div> 
     <div class="Add_btn"> 
      <button class="btn btn-success">Add </button> 
     </div> 
    </div> 
    </div> 
</t> 

创建assets_backend。 XML与您的其他XML文件。

/view/assets_backend.xml - >这里您需要添加javasscript文件路径。

<?xml version="1.0"?> 
<odoo> 
    <data> 
    <template id="assets_backend" inherit_id="web.assets_backend"> 
     <xpath expr="script[last()]" position="after"> 

      <script type="text/javascript" src="/static/src/js/rhp_main.js"></script> 
     </xpath> 
    </template> 
    <template id="assets_common" inherit_id="web.assets_common"> 
     <xpath expr="script[last()]" position="after"> 

     </xpath> 
    </template> 
    </data> 
</odoo> 

Answer 3

我不熟悉Bounty，我对此解决方案link_to_the_screenshot_of_desired_output。它会正常工作。

Create your js file in /module_name/static/src/js/your_js_file.js and 
add the following code : 


    odoo.define('mypetstore.test_js', function (require) { 
    "use strict"; 

    var Widget = require('web.Widget'); 
    var core = require('web.core'); 
    var Model = require('web.Model'); 

    var ProductsWidget = Widget.extend({ 
     template: "ProductsWidget", 
     init: function(parent, products, color) { 
     this._super(parent); 
     this.products = products; 
     this.color = color; 
    }, 
    }); 

    var HomePage = Widget.extend({ 

    start: function() { 
     var products = new ProductsWidget(
      this, ["cpu", "mouse", "keyboard", "graphic card", 
        "screen"], "#00FF00"); 
     products.appendTo(this.$el); 
     },  
    }); 
    core.action_registry.add('ProductsWidget', HomePage); 
    }); 

在/module_name/static/src/xml/your_xml_file.xml创建XML文件，并添加以下代码：

<?xml version="1.0" encoding="UTF-8"?> 
    <templates xml:space="preserve"> 
     <t t-name="ProductsWidget"> 
     <div> 
      <t t-foreach="widget.products" t-as="product"> 
       <span class="oe_products_item" 
        t-attf-style="background-color: {{ widget.color 
       }};"> 
       <t t-esc="product"/> 
       </span> 
       <br/> 
      </t> 
     </div> 
     </t> 
    </templates> 

创建你的CSS文件/ MODULE_NAME /静态/ src目录/ CSS /your_css_file.css并添加以下代码：

 .oe_products_item { 
    display: inline-block; 
    padding: 3px; 
    margin: 5px; 
    border: 1px solid black; 
    border-radius: 3px; 
    } 

创建/module_name/views/your_xml_file_.xml视图的XML文件，并添加以下代码：

<?xml version="1.0" encoding="UTF-8"?> 
    <odoo> 
     <data> 
     <template id="assets_backend" name="give_name" 
      inherit_id="web.assets_backend"> 
      <xpath expr="." position="inside"> 
      <script type="text/javascript" 
      src="/module_name/static/src/js/your_js_file_name.js"> 
      </script> 
      <link href="/module_name/static/src/css/your_css_file.css" 
      rel="stylesheet"></link> 
      </xpath> 
     </template> 
     <record id="template_id" model="ir.actions.client"> 
      <field name="name">ProductsWidget</field> 
      <field name="tag">ProductsWidget</field> 
     </record> 
     <menuitem id="home_page_menu" 
      name="Home Page" 
      action="template_id"/> 
     </data> 
     </odoo> 

添加以下代码在清单的.py：

'data': [ 
    'views/your_xml_file.xml', 
    ], 
    'qweb': ['static/src/xml/pet.xml'],