Home/ Questions/Q 6233077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:14:02+00:00

Using some tutorials I wrote simple widget but it causes error declare customwidget.TestDijit: mixin

  • 0

Using some tutorials I wrote simple widget but it causes error “declare customwidget.TestDijit: mixin #0 is unknown”:

//test.html

<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true">
</script>
<script type="text/javascript" src="Test.js"> </script>
<script type="text/javascript">

dojo.require("customwidget.TestWidget");

</script>
</head>
<body>
<div dojoType='customwidget.TestWidget'/>
</body>

//test.js

dojo.provide('customwidget.TestDijit')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dojo.caсhe');

dojo.declare("customwidget.TestDijit",  [dijit._Widget, dijit._Templated],
{
    //can't use  dojo.caсhe('customwidget.template', 'testdijit.html') I don't know why
    templatePath : "",
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});

//testdijit.html

<div id="${id}">
<input dojoattachevent="onClick: clickEvent" dojotype="dijit.form.Button" label="Search" />
</div>

I found out that if I place all widget’s code in the dojo.ready funciton, then it will work(thank to this article). Of course, I don’t want to locate all my js code in the ready function. In the mentioned article’s code sample authors wrote // Future tutorials will explain how to properly separate this out into its own file.
Do you know how to solve this problem?

PS. Do you also know why I can’t use dojo.cashe in the this js code?

UPD: Problems with loading cross-domain resources.
here is similar discussion but I couldn understand how to solve the problem. I can store dojo localy but in this case it couldn’t find my TestWidget.js – I don’t how I can specify the path to my scipts. If I do that using baseUrl it will say “Could not load ‘dojo._base.lang’; last tried ‘./_base/lang.js'”.

test/test.html

<!DOCTYPE html> 
<head>
<title>Test</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css"> 
<link rel="stylesheet" href="css/layout.css"> 

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
    djConfig="parseOnLoad:true, baseUrl: './'">
</script>

<script type="text/javascript">

    dojo.require("customwidget.TestWidget");

</script>
</head>
<body class="claro">
    <div dojoType='js.Test'>
    </div>
</body>

test/customwidget/TestWidget.js

dojo.provide('customwidget.TestWidget')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");
//dojo.require('dojo.cache');

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated],
{
    templatePath : "",//dojo.cache('customwidget.template', 'testdijit.html'),
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a few things first (but I’m guessing these are mostly typos you made when posting here).

    • dojo.cashe should be dojo.cache
    • you seem to mix customwidget.TestWidget with customwidget.TestDijit
    • if you want to use dijit.form.Button in your widget’s template, you have to require it

    Now onto the more important matters. When you use a <script> tag to include the js file, Dojo doesn’t take care of loading requirements before doing anything else. That’s why you get mixin unknown, because in the call to dojo.declare, the class dijit._Templated is not yet loaded.

    However, if you use dojo.require to load your widgets/modules, dojo makes sure the requirements (all the dojo.require statements) in Test.js are done loading before trying to use them. So, remove your <script>-tag for Test.js.

    Now we need to tell dojo.require where your files can be found. You are using dojo from a CDN (googleapis), so by default, Dojo will actually try to load 

    "http://ajax.googleapis.com/...../1.6.0/customwidget/TestWidget.js".

    That’s not right at all! Rename your Test.js to TestWidget.js and put it in a folder called customwidget. This is the Dojo convention for module paths. If your widget was called customwidget.coolwidgets.TestWidget, it should be in customwidget/coolwidgets/TestWidget.js.

    For now, put this folder next to your HTML file. Then add the following to your djConfig:

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true, baseUrl: './' ">
</script>

    This tells dojo.require to start looking for widgets in the same folder as your HTML file, and not on the server where you are loading Dojo itself from. Since we put the customwidget folder next to out HTML file, that should work fine.

    In your dojo.cache call you are using customwidget.template and testdijit.html. That means your testdijit.html file has to be placed in customwidget/template/

    Edit: Here’s a setup that works correctly on my machine.

    Folder structure:

    test/
   test.html
   customwidget/
      TestWidget.js

    test.html:

    <html>                                                                                                            
  <head>                    
    <link rel="stylesheet"                                                                                           
      href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad:true,baseUrl: './'"></script>
    <script type="text/javascript">
        dojo.require("customwidget.TestWidget");
    </script>
  </head>
  <body class="claro">
    <div dojoType='customwidget.TestWidget'></div>
  </body>
</html>

    TestWidget.js

    dojo.provide('customwidget.TestWidget');

dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated], {
     templateString: "<div>Foobar<br/><button dojoType='dijit.form.Button'>Yeah</button></div>",
     widgetsInTemplate : true
 });
    • 0