Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are a few things first (but I'm guessing these are mostly typos you made when posting here).</p> <ul> <li><code>dojo.cashe</code> should be <code>dojo.cache</code></li> <li>you seem to mix <code>customwidget.TestWidget</code> with <code>customwidget.TestDijit</code></li> <li>if you want to use <code>dijit.form.Button</code> in your widget's template, you have to require it</li> </ul> <p>Now onto the more important matters. When you use a &lt;script&gt; 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 <code>dojo.declare</code>, the class <code>dijit._Templated</code> is not yet loaded.</p> <p>However, if you use dojo.require to load your widgets/modules, dojo makes sure the requirements (all the dojo.require statements) in <em>Test.js</em> are done loading before trying to use them. So, remove your &lt;script&gt;-tag for <em>Test.js</em>.</p> <p>Now we need to tell <code>dojo.require</code> where your files can be found. You are using dojo from a CDN (googleapis), so by default, Dojo will actually try to load </p> <pre><code>"http://ajax.googleapis.com/...../1.6.0/customwidget/TestWidget.js". </code></pre> <p>That's not right at all! Rename your <em>Test.js</em> to <em>TestWidget.js</em> and put it in a folder called <em>customwidget</em>. This is the Dojo convention for module paths. If your widget was called <code>customwidget.coolwidgets.TestWidget</code>, it should be in <em>customwidget/coolwidgets/TestWidget.js</em>.</p> <p>For now, put this folder next to your HTML file. Then add the following to your <code>djConfig</code>:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true, baseUrl: './' "&gt; &lt;/script&gt; </code></pre> <p>This tells <code>dojo.require</code> 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 <em>customwidget</em> folder next to out HTML file, that should work fine.</p> <p>In your <code>dojo.cache</code> call you are using <code>customwidget.template</code> and <em>testdijit.html</em>. That means your <em>testdijit.html</em> file has to be placed in <em>customwidget/template/</em></p> <hr> <p><strong>Edit:</strong> Here's a setup that works correctly on my machine.</p> <p>Folder structure:</p> <pre><code>test/ test.html customwidget/ TestWidget.js </code></pre> <p>test.html:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad:true,baseUrl: './'"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; dojo.require("customwidget.TestWidget"); &lt;/script&gt; &lt;/head&gt; &lt;body class="claro"&gt; &lt;div dojoType='customwidget.TestWidget'&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>TestWidget.js</p> <pre><code>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: "&lt;div&gt;Foobar&lt;br/&gt;&lt;button dojoType='dijit.form.Button'&gt;Yeah&lt;/button&gt;&lt;/div&gt;", widgetsInTemplate : true }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload