Dojo snippets

Qualche utile snippet per la libreria javascript Dojo.

Select autocomplete.
/response/cities.json ritorna questa struttura dati:

{
identifier:"abbreviation",
items: [
        {name:"Bologna", label:"Bologna",abbreviation:"BO"},
        {name:"Como", label:"Como",abbreviation:"CO"},
        {name:"Spezia", label:"La Spezia",abbreviation:"SP"},
        {name:"Firenze", label:"Firenze",abbreviation:"FI"}
]}

Nella pagina

javascript:

dojo.require("dijit.form.ComboBox");
 
dojo.require("dojo.data.ItemFileReadStore");
function setVal(value) {
    console.debug("Selected "+value);
}

html:

<div dojoType="dojo.data.ItemFileReadStore"
     jsId="citiesStore"
     url="/response/cities.json"></div>
 
<input  dojoType="dijit.form.ComboBox"
        store="citiesStore"
        value="Spezia"
        searchAttr="name"
        name="cities"
        onChange="setVal" />

Semplice chiamata GET

Nella pagina html

<button dojoType="dijit.form.Button" widgetId="helloButton">
Hello World!
    <script type="dojo/method" event="onClick">
dojo.xhrGet({
        url: 'response/data.txt',
        load: helloCallback,
        error: helloError
   });
    </script>
</button>
<div id="response">response</div>

Calendar widget

Nella pagina javascript

function log(str){
dojo.byId("response").innerHTML = str;
}

html:

<div dojoType="dojox.widget.Calendar" id="cal">
                    <script type="dojo/connect" event="onValueSelected" args="value">
                        log("Date Value selected: " + value);
                    </script>
                </div>
<div id="response">response</div>

Dialog

<div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
    hello
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonOne" dojoType="dijit.form.Button">Show me!
    <script type="dojo/method" event="onClick" args="evt">
        // Show the Dialog:
        dijit.byId("dialogOne").show();
    </script>
</button>

Dialog con title

<button onclick="dijit.byId('yetanotherTest').show()">showTitle</button>    
<div id="yetanotherTest" dojoType="dojox.widget.Dialog" showTitle="true" title="I am A title!!!">
    <p/><h2 style="margin-top:0">Wow!</h2>
    <p style="margin-top:0">un dialog!
    hymenaeos.
    </p>
</div>

Semplice grid

data3.json

{
            identifier : "id",
            items      : [
                          {"id" : 1, "label" : "fodddo"},
                          {"id" : 2, "label" : "bwwwar"},
                          {"id" : 3, "label" : "batttz"}
            ]
          }

html:

  <!--Remember to have dojo.require'd the ItemFileWriteStore -->
  <span dojoType="dojo.data.ItemFileWriteStore"
        jsId="gridStore"
        url="/response/data3.json">
  </span>
 
  <table id="gridNode"
         dojoType="dojox.grid.DataGrid"
         store="gridStore">
    <thead>
      <tr>
        <th width="50%" field="id">ID</th>
        <th width="50%" field="label"
            cellType="dojox.grid.cells.Select"
            options="foo,bar,baz,qux"
            editable="true">Label</th>
      </tr>
    </thead>
  </table>