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>