dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
659 lines (594 loc) • 23.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Data-bound Form element Kitchen Sink test</title>
<style type="text/css">
@import "css/app-format.css";
@import "../../../dijit/themes/claro/claro.css";
label {
text-align: left;
width: 100%;
}
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:1,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
var store, selctrl, decselctrl, numspinctrl;
var filctrl, decfilctrl;
var comboctrl, deccomboctrl;
var datectrl, decdatectrl;
var sliderctrl, decsliderctrl;
var numspinctrl, decnumspinctrl;
var simpTActrl, decsimpTActrl;
var textareactrl, dectextareactrl;
var deccalctrl, deccolorctrl;
require([
'dojo/_base/kernel',
"dojo/_base/declare",
'dojo/parser',
'dojo/ready',
'dojox/mvc',
'dojox/mvc/at',
'dijit/_WidgetBase',
'dijit/form/TextBox',
'dijit/form/Button',
'dijit/form/Select',
'dijit/form/FilteringSelect',
'dijit/form/ComboBox',
'dijit/form/DateTextBox',
'dijit/form/HorizontalSlider',
'dijit/form/NumberSpinner',
'dijit/form/SimpleTextarea',
'dijit/form/Textarea',
'dojo/data/ItemFileReadStore',
"dojo/Stateful",
"dojox/mvc/getStateful",
"dojox/mvc/EditModelRefController",
'dijit/Calendar',
'dijit/ColorPalette',
'dojox/mvc/Group',
'dojox/mvc/Output',
'dojo/date/locale'
], function(kernel, declare, parser, ready, mvc, at, _WidgetBase, TextBox, Button, Select, FilteringSelect, ComboBox, DateTextBox,
HorizontalSlider, NumberSpinner, SimpleTextarea, Textarea, ItemFileReadStore, Stateful, getStateful, EditModelRefController,
Calendar, ColorPalette){
//window.at = at;
var alreadyset = false;
var data = [
{id: '1',name:"one"},
{id: '2',name:"two"},
{id: '3',name:"three"},
{id: '4',name:"four"},
{id: '5',name:"five"},
{id: '6',name:"six"},
{id: '7',name:"seven"},
{id: '8',name:"eight"},
{id: '9',name:"nine"},
{id: '10',name:"ten"},
{id: '11',name:"eleven"},
{id: '12',name:"twelve"},
{id: '13',name:"thirteen"}
];
store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'name',
items: data
}
});
var data2 = {
identifier: "value",
label: "label",
items: [
{value: "1", label: "one"},
{value: "2", label: "two"},
{value: "3", label: "three"},
{value: "4", label: "four"},
{value: "5", label: "five"},
{value: "6", label: "six"},
{value: "7", label: "seven"},
{value: "8", label: "eigth"},
{value: "9", label: "nine"},
{value: "10", label: "ten"},
{value: "11", label: "eleven"},
{value: "12", label: "twelve"},
{value: "13", label: "thirteen"},
{value: "14", label: "fourteen"}
]
};
selctrl = new EditModelRefController({sourceModel: new Stateful({number: "1"})});
decselctrl = new EditModelRefController({sourceModel: new Stateful({number: "1"})});
// create models for filtering selects
filctrl = new EditModelRefController({sourceModel: new Stateful({number: "2"})});
decfilctrl = new EditModelRefController({sourceModel: new Stateful({number: "2"})});
// create models for ComboBoxes
comboctrl = new EditModelRefController({sourceModel: new Stateful({number: "three"})});
deccomboctrl = new EditModelRefController({sourceModel: new Stateful({number: "three"})});
// create a model for DateTextBox
datectrl = new EditModelRefController({sourceModel: new Stateful({number: "2011-04-04"})});
decdatectrl = new EditModelRefController({sourceModel: new Stateful({number: "2011-04-04"})});
// create a model for Slider
sliderctrl = new EditModelRefController({sourceModel: new Stateful({number: "5"})});
decsliderctrl = new EditModelRefController({sourceModel: new Stateful({number: "5"})});
// create a model for NumberSpinner
numspinctrl = new EditModelRefController({sourceModel: new Stateful({number: "6"})});
decnumspinctrl = new EditModelRefController({sourceModel: new Stateful({number: "6"})});
// create a model for SimpleTextArea
simpTActrl = new EditModelRefController({sourceModel: new Stateful({number: "7"})});
decsimpTActrl = new EditModelRefController({sourceModel: new Stateful({number: "7"})});
// create a model for TextArea
textareactrl = new EditModelRefController({sourceModel: new Stateful({number: "8"})});
dectextareactrl = new EditModelRefController({sourceModel: new Stateful({number: "8"})});
// create a model for dijit.Calendar
deccalctrl = new EditModelRefController({sourceModel: new Stateful({date: "Mon Apr 04 2011 01:00:00 GMT-0400 (Eastern Daylight Time)"})});
// create a model for dijit.ColorPalette
deccolorctrl = new EditModelRefController({sourceModel: new Stateful({code: "#000000"})});
// Handle the programmatic creation of widgets here:
// create the select, textbox, output and button
var sel = new Select({
store: store,
loadChildrenOnOpen: true,
// value: 1,
value: at(selctrl, 'number') // bind to model.number
}, document.getElementById('sel'));
var text = new TextBox({
//id: "seltext",
value: at(selctrl, 'number') // bind to model.number
}, document.getElementById('seltext'));
text.startup();
var selOutput = new mvc.Output({
value: at(selctrl, 'number') // bind to model.number
}, document.getElementById('selOutput'));
selOutput.startup();
var reset1 = new Button({
onClick: function(){ selctrl.reset(); },
id: "selReset",
label: "Reset"
}, document.getElementById('reset1'));
reset1.startup();
sel.watch('value', function () {
//console.log('sel value changed', arguments);
});
text.watch('value', function () {
//console.log('text value changed', arguments);
});
sel.startup();
// create the filtering select, textbox, output and button
var filsel = new FilteringSelect({
store: store,
value: at(filctrl,'number') // bind to ctrl.number
}, document.getElementById('filsel'));
filsel.startup();
var filtext = new TextBox({
value: at(filctrl,'number') // bind to ctrl.number
}, document.getElementById('filtext'));
filtext.startup();
var filoutput = new mvc.Output({
value: at(filctrl,'number') // bind to ctrl.number
}, document.getElementById('filoutput'));
filoutput.startup();
var filreset = new Button({
onClick: function(){filctrl.reset();},
id: "filReset",
label: "Reset"
}, document.getElementById('filreset'));
filreset.startup();
// create the comboBox, textbox, output and button
var combo = new ComboBox({
store: store,
value: at(comboctrl, 'number') // bind to ctrl.number
}, document.getElementById('combosel'));
var combotext = new TextBox({
value: at(comboctrl, 'number')
}, document.getElementById('combotext'));
var combooutput = new mvc.Output({
value: at(comboctrl, 'number')
}, document.getElementById('combooutput'));
combooutput.startup();
var comboreset = new Button({
onClick: function(){comboctrl.reset();},
id: "comboReset",
label: "Reset"
}, document.getElementById('comboreset'));
comboreset.startup();
combotext.startup();
combo.startup();
// create the dijit.form.DateTextBox, textbox, output and button
var dateWid = new DateTextBox({
value: at(datectrl, 'number') // bind to ctrl.number
}, document.getElementById('datesel'));
var datetext = new TextBox({
value: at(datectrl, 'number')
}, document.getElementById('datetext'));
var dateoutput = new mvc.Output({
value: at(datectrl, 'number')
}, document.getElementById('dateoutput'));
dateoutput.startup();
var datereset = new Button({
onClick: function(){datectrl.reset();},
id: "dateReset",
label: "Reset"
}, document.getElementById('datereset'));
datereset.startup();
datetext.startup();
dateWid.startup();
// create the dijit.form.HorizontalSlider, textbox, output and button
var sliderWid = new HorizontalSlider({
style:{width:"190px"},
minimum:0,
maximum:100,
discreteValues:21,
value: at(sliderctrl, 'number') // bind to ctrl.number
}, document.getElementById('slidersel'));
var slidertext = new TextBox({
value: at(sliderctrl, 'number')
}, document.getElementById('slidertext'));
var slideroutput = new mvc.Output({
value: at(sliderctrl, 'number')
}, document.getElementById('slideroutput'));
slideroutput.startup();
var sliderreset = new Button({
onClick: function(){sliderctrl.reset();},
id: "sliderReset",
label: "Reset"
}, document.getElementById('sliderreset'));
sliderreset.startup();
slidertext.startup();
sliderWid.startup();
// create the dijit.form.NumberSpinner, textbox, output and button
var numspinWid = new NumberSpinner({
// constraints:{max:100,places:0},
value: at(numspinctrl, 'number') // bind to ctrl.number
}, document.getElementById('numspinsel'));
var numspintext = new TextBox({
value: at(numspinctrl, 'number')
}, document.getElementById('numspintext'));
var numspinoutput = new mvc.Output({
value: at(numspinctrl, 'number')
}, document.getElementById('numspinoutput'));
numspinoutput.startup();
var numspinreset = new Button({
onClick: function(){numspinctrl.reset();},
id: "numspinReset",
label: "Reset"
}, document.getElementById('numspinreset'));
numspinreset.startup();
numspintext.startup();
numspinWid.startup();
// create the dijit.form.SimpleTextarea, textbox, output and button
var simpTAWid = new SimpleTextarea({
style:{height:"20px", width:"180px"},
value: at(simpTActrl, 'number') // bind to ctrl.number
}, document.getElementById('simpTAsel'));
var simpTAtext = new TextBox({
value: at(simpTActrl, 'number')
}, document.getElementById('simpTAtext'));
var simpTAoutput = new mvc.Output({
value: at(simpTActrl, 'number')
}, document.getElementById('simpTAoutput'));
simpTAoutput.startup();
var simpTAreset = new Button({
onClick: function(){simpTActrl.reset();},
id: "simpTAReset",
label: "Reset"
}, document.getElementById('simpTAreset'));
simpTAreset.startup();
simpTAtext.startup();
simpTAWid.startup();
// create the dijit.form.Textarea, textbox, output and button
var textareaWid = new Textarea({
// constraints:{max:100,places:0},
value: at(textareactrl, 'number') // bind to ctrl.number
}, document.getElementById('textareasel'));
var textareatext = new TextBox({
value: at(textareactrl, 'number')
}, document.getElementById('textareatext'));
var textareaoutput = new mvc.Output({
value: at(textareactrl, 'number')
}, document.getElementById('textareaoutput'));
textareaoutput.startup();
var textareareset = new Button({
onClick: function(){textareactrl.reset();},
id: "textareaReset",
label: "Reset"
}, document.getElementById('textareareset'));
textareareset.startup();
textareatext.startup();
textareaWid.startup();
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="header" style="margin-top: 0px;">
<div id="navigation" style="margin-top: 0px;"></div>
<div id="headerInsert" style="margin-top: 0px;">
<h2>Data-bound Form Element Kitchen Sink MVC test</h2>
</div>
</div>
<div id="main" style="margin-top: 0px;">
<div id="leftNav"></div>
<div id="mainContent">
<h2 style="margin-top: 0px;">Programmatic creation of Form elements:</h2>
<table>
<tbody>
<tr>
<td><label>Widget</label></td>
<td><label></label></td>
<td><label>Textbox</label></td>
<td><label>Output</label></td>
<td><label>Model Reset</label></td>
</tr>
<tr>
<td><label for="sel">Select:</label></td>
<td><div id="sel"></div></td>
<td><div id="seltext"></div></td>
<td><div id="selOutput"></div></td>
<td><div id="reset1" ></div></td>
</tr>
<tr>
<td><label for="filsel">FilteringSelect:</label></td>
<td><div id="filsel"></div></td>
<td><div id="filtext"></div></td>
<td><div id="filoutput"></div></td>
<td><div id="filreset"></div></td>
</tr>
<tr>
<td><label for="combosel">ComboBox:</label></td>
<td><div id="combosel"></div></td>
<td><div id="combotext"></div></td>
<td><div id="combooutput"></div></td>
<td><div id="comboreset"></div></td>
</tr>
<tr>
<td><label for="datesel">DateTextBox:</label></td>
<td><div id="datesel"></div></td>
<td><div id="datetext"></div></td>
<td><div id="dateoutput"></div></td>
<td><div id="datereset"></div></td>
</tr>
<tr>
<td><label for="slidersel">Slider:</label></td>
<td><div id="slidersel"></div></td>
<td><div id="slidertext"></div></td>
<td><div id="slideroutput"></div></td>
<td><div id="sliderreset"></div></td>
</tr>
<tr>
<td><label for="numspinsel">NumberSpinner:</label></td>
<td><div id="numspinsel"></div></td>
<td><div id="numspintext"></div></td>
<td><div id="numspinoutput"></div></td>
<td><div id="numspinreset"></div></td>
</tr>
<tr>
<td><label for="simpTAsel">SimpleTextArea:</label></td>
<td><div id="simpTAsel"></div></td>
<td><div id="simpTAtext"></div></td>
<td><div id="simpTAoutput"></div></td>
<td><div id="simpTAreset"></div></td>
</tr>
<tr>
<td><label for="textareasel">TextArea:</label></td>
<td><div id="textareasel"></div></td>
<td><div id="textareatext"></div></td>
<td><div id="textareaoutput"></div></td>
<td><div id="textareareset"></div></td>
</tr>
</tbody>
</table>
<h2>Declarative creation of Form elements:</h2>
<table>
<tbody>
<tr>
<td><label>Widget</label></td>
<td><label></label></td>
<td><label>Textbox</label></td>
<td><label>Output</label></td>
<td><label>Model Reset</label></td>
</tr>
<tr>
<!-- <td><label for="decsel">Select:</label></td>
<td>
<select id="decsel" style="width: 188px;"
data-dojo-id="decsel" data-dojo-type="dijit.form.Select"
data-dojo-props='name:"decsel",loadChildrenOnOpen: true, value: at(decselctrl, 'number') '>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</td>
-->
<td><label for="decsel">Select:</label></td>
<td>
<select id="decsel" style="width: 188px;"
data-dojo-id="decsel" data-dojo-type="dijit.form.Select"
data-dojo-props='store:store, name:"decsel",loadChildrenOnOpen: true, value: at(decselctrl, "number")'>
</select>
</td>
<td>
<input class="cell" id="decseltext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decselctrl, 'number')"></input>
</td>
<td><span id="decselOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decselctrl, 'number')">
${this.value}
</span></td>
<td><button id="decselReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decselctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="decfilsel">FilteringSelect:</label></td>
<td>
<input id="decfilsel" data-dojo-type="dijit.form.FilteringSelect"
data-dojo-props='store:store, value: at(decfilctrl, "number")'/>
</td>
<td>
<input id="decfiltext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decfilctrl, 'number')"></input>
</td>
<td><span id="decfilOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decfilctrl, 'number')">
${this.value}
</span></td>
<td><button id="decfilReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decfilctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="deccombosel">ComboBox:</label></td>
<td>
<input id="deccombosel" data-dojo-type="dijit.form.ComboBox"
data-dojo-props='store:store, value: at(deccomboctrl, "number")'/>
</td>
<td>
<input id="deccombotext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(deccomboctrl, 'number')"></input>
</td>
<td><span id="deccomboOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(deccomboctrl, 'number')">
${this.value}
</span></td>
<td><button id="deccomboReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){deccomboctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="datesel">DateTextBox:</label></td>
<td>
<input id="decdatesel" data-dojo-type="dijit.form.DateTextBox"
data-dojo-props='store:store, value: at(decdatectrl, "number")'/>
</td>
<td>
<input id="decdatetext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decdatectrl, 'number')"></input>
</td>
<td><span id="decdateOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decdatectrl, 'number')">
${this.value}
</span></td>
<td><button id="decdateReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decdatectrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="decslidersel">Slider:</label></td>
<td>
<input id="decslidersel" data-dojo-type="dijit.form.HorizontalSlider"
data-dojo-props='store:store, value: at(decsliderctrl, "number"),
style:{width:"190px"}, minimum:0, maximum:100, discreteValues:21'/>
</td>
<td>
<input id="decslidertext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decsliderctrl, 'number')"></input>
</td>
<td><span id="decsliderOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decsliderctrl, 'number')">
${this.value}
</span></td>
<td><button id="decsliderReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decsliderctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="decnumspinsel">NumberSpinner:</label></td>
<td>
<input id="decnumspinsel" data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props='store:store, value: at(decnumspinctrl, "number")'/>
</td>
<td>
<input id="decnumspintext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decnumspinctrl, 'number')"></input>
</td>
<td><span id="decnumspinOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decnumspinctrl, 'number')">
${this.value}
</span></td>
<td><button id="decnumspinReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decnumspinctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="decsimpTAsel">SimpleTextArea:</label></td>
<td>
<input id="decsimpTAsel" data-dojo-type="dijit.form.Textarea"
data-dojo-props='store:store, value: at(decsimpTActrl, "number")'/>
</td>
<td>
<input id="decsimpTAtext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(decsimpTActrl, 'number')"/>
</td>
<td><span id="decsimpTAOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(decsimpTActrl, 'number')">
${this.value}
</span></td>
<td><button id="decsimpTAReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){decsimpTActrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="dectextareasel">TextArea:</label></td>
<td>
<input id="dectextareasel" data-dojo-type="dijit.form.Textarea"
data-dojo-props='store:store, value: at(dectextareactrl, "number")'/>
</td>
<td>
<input id="dectextareatext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(dectextareactrl, 'number')"/>
</td>
<td><span id="dectextareaOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(dectextareactrl, 'number')">
${this.value}
</span></td>
<td><button id="dectextareaReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){dectextareactrl.reset();}">Reset</button></td>
</tr>
</tbody>
</table>
<h2>Test data-bound dijit.Calendar:</h2>
<table>
<tbody>
<tr>
<td><label>Widget</label></td>
<td><label></label></td>
<td><label>Textbox</label></td>
<td><label>Output</label></td>
<td><label>Model Reset</label></td>
</tr>
<tr>
<td><label for="deccal">Calendar:</label></td>
<td>
<input class="cell" id="deccal" data-dojo-id="deccal" data-dojo-type="dijit.Calendar"
data-dojo-props='value: at(deccalctrl, "date") '/>
</td>
<td>
<input class="cell" id="deccaltext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(deccalctrl, 'date')"></input>
</td>
<td><span id="deccalOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(deccalctrl, 'date')">
${this.value}
</span></td>
<td><button id="deccalReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){deccalctrl.reset();}">Reset</button></td>
</tr>
<tr>
<td><label for="deccolor">ColorPalette:</label></td>
<td>
<div id="deccolor" data-dojo-type="dijit.ColorPalette"
data-dojo-props='palette:"3x4", value: at(deccolorctrl, "code")'></div>
</td>
<td>
<input class="cell" id="deccolortext" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at(deccolorctrl, 'code')"></input>
</td>
<td><span id="deccolorOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at(deccolorctrl, 'code')">
${this.value}
</span></td>
<td><button id="deccolorReset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){deccolorctrl.reset();}">Reset</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>