1: require([
2: "dojo/ready", "dojo/store/JsonRest", "dijit/form/ComboBox", "dojox/storage", "dojo/request", "dojo/json"
3: ], function(ready, JsonRest, ComboBox, storage, request, json)
4:
5: {
6: var comboBox = new ComboBox(
7: {
8: id: "IdCombo",
9: name: "NameCombo",
10: placeholder: "Enter text",
11: }, "placesomewhereid");
12:
13: comboBox.startup();
14:
15: require(["dojo/on", "dijit/focus", "dojo/keys", "dojo/domReady!"], function(on, focusUtil, keys)
16: {
17: on(document, "keyup", function(event)
18: {
19: if(event.keyCode == keys.ENTER && focusUtil.curNode.id == "IdCombo")
20: {
21: //Write code here that needs to run when enter key is pressed
22: }
23: });
24: });
25: }); Wednesday, May 15, 2013
DOJO Combobox On Enter Key Event
Below code can be used to setup a event to fire when a enter key is pressed inside combobox.
Monday, May 13, 2013
Creating autocomplete text box in DOJO
Using DOJO combobox, you can create a autocomplete functionality. Below code creates a programmatic combobox and assigns a json store to combobox. A declarative input form element is used a placeholder on page.
The AJAX service should return items in below json format
1: <script type="text/javascript">
2: require([
3: "dojo/ready", "dojo/store/JsonRest", "dijit/form/ComboBox"], function(ready, JsonRest, ComboBox)
4: {
5: var jsonStore = new JsonRest
6: ({
7: target: "URL for Ajax service"
8: });
9: var comboBox = new ComboBox(
10: {
11: id: "SomeUniqueID",
12: name: "SomeUniqueName",
13: value: "",
14: store: jsonStore,
15: pageSize: 3,
16: searchAttr: "key",
17: queryExpr: "${0}"
18: }, "StoreItemSelect");
19: comboBox.startup();
20: });
21: </script>
22: <body>
23: <input id="StoreItemSelect"/>
24: <body> The AJAX service should return items in below json format
[{key: "Autocomplete value 1"},{key: "Autocomplete value 2"},{key: "Autocomplete value 3"}]
Friday, May 10, 2013
Dojo TabContainer Tab select ContentPane reload
The usual way to implement a TabContainer is to define a ContentPane as tab childs. When a tab is selected and if you want the ContentPane to reload everytime the tab is selected then you need to specify the refreshOnShow property of ContentPane to true.
In this case when "Second Tab" is selected, it refreshes every time. Refresh basically calls the dojo ready function on the page same as when loading the page using F5. "First tab" on the other hand will only load the first time its selected and will not refresh in later selects
var tc = new TabContainer(
{
style: "height: 100%; width: 100%;"
}, "tc1-prog");
var cp2 = new ContentPane(
{
title: "First Tab",
href: "page1.html",
});
tc.addChild(cp2);
var cp2 = new ContentPane({
title: "Second Tab",
href: "page2.html",
refreshOnShow: true
});
tc.addChild(cp2); In this case when "Second Tab" is selected, it refreshes every time. Refresh basically calls the dojo ready function on the page same as when loading the page using F5. "First tab" on the other hand will only load the first time its selected and will not refresh in later selects
Subscribe to:
Posts (Atom)