├── .gitignore ├── example-resources ├── dgrid-css │ ├── images │ │ ├── ui-icons_222222_256x240.png │ │ └── ui-icons_ffffff_256x240.png │ └── dgrid.css ├── examples.css ├── dijit_demo.css ├── Select.css └── countries.json ├── src ├── for-dgrid-demos │ ├── Select.html │ ├── SingleQuery.js │ ├── Select.js │ └── SummaryRow.js ├── dijit_05_templated.js ├── for-dijit-demos │ ├── SomeWidget.html │ └── SomeWidget.js ├── dijit_02_layout.js ├── dijit_03_form.js ├── dgrid_07_dropdown.js ├── dgrid_04_comp_col.js ├── dgrid_01_hello.js ├── dojo_02_topic.js ├── dgrid_05_single_query.js ├── dijit_04_menus.js ├── dojo_04_request.js ├── dgrid_03_col_set.js ├── dgrid_02_stores.js ├── dojo_01_animation.js ├── dgrid_06_summary_row.js ├── dojo_03_keyboard.js └── dijit_01_key_nav.js ├── dgrid_01_hello.html ├── dgrid_04_comp_col.html ├── .gitmodules ├── dgrid_03_col_set.html ├── dgrid_07_dropdown.html ├── dgrid_06_summary_row.html ├── dgrid_02_stores.html ├── package.json ├── LICENSE ├── dijit_05_templated.html ├── dijit_01_key_nav.html ├── dgrid_05_single_query.html ├── dojo_02_topic.html ├── dijit_04_menus.html ├── dojo_04_request.html ├── README.md ├── dojo_03_keyboard.html ├── webpack.config.js ├── dojo_01_animation.html ├── dijit_03_form.html └── dijit_02_layout.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea -------------------------------------------------------------------------------- /example-resources/dgrid-css/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nordth/dojo-webpack-loader-examples/HEAD/example-resources/dgrid-css/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /example-resources/dgrid-css/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nordth/dojo-webpack-loader-examples/HEAD/example-resources/dgrid-css/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /src/for-dgrid-demos/Select.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
-------------------------------------------------------------------------------- /src/dijit_05_templated.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/templated/index.html 2 | var parser = require("dojo/parser"); 3 | require("./for-dijit-demos/SomeWidget"); 4 | require("dijit/form/Button"); 5 | 6 | // Invoke the dojo/parser 7 | parser.parse(); -------------------------------------------------------------------------------- /src/for-dijit-demos/SomeWidget.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
And our container:
4 |
5 |
6 | -------------------------------------------------------------------------------- /dgrid_01_hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 01 - hello - dojo-webpack-config 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /dgrid_04_comp_col.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 04 - comp col - dojo-webpack-config 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "dojo/dojo"] 2 | path = dojo/dojo 3 | url = https://github.com/dojo/dojo.git 4 | [submodule "dojo/dijit"] 5 | path = dojo/dijit 6 | url = https://github.com/dojo/dijit.git 7 | [submodule "dojo/dstore"] 8 | path = dojo/dstore 9 | url = https://github.com/SitePen/dstore 10 | [submodule "dojo/dgrid"] 11 | path = dojo/dgrid 12 | url = https://github.com/SitePen/dgrid 13 | -------------------------------------------------------------------------------- /src/dijit_02_layout.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/dijit_layout/index.html 2 | 3 | var parser = require("dojo/parser"); 4 | 5 | // All dijit classes will be registered in dojo-webpack-loader/lib/dojo-require automatically 6 | require("dijit/layout/BorderContainer"); 7 | require("dijit/layout/TabContainer"); 8 | require("dijit/layout/ContentPane"); 9 | 10 | parser.parse(); -------------------------------------------------------------------------------- /dgrid_03_col_set.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 03 - col set - dojo-webpack-config 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/dijit_03_form.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/beyond_dojo/index.html 2 | var parser = require("dojo/parser"); 3 | 4 | require("dijit/form/TextBox"); 5 | require("dijit/form/DateTextBox"); 6 | require("dijit/form/FilteringSelect"); 7 | require("dijit/form/Form"); 8 | require("dijit/form/Button"); 9 | 10 | var dojoRequire = require("dojo-webpack-loader/lib/dojo-require"); 11 | dojoRequire.register("dojo/store/JsonRest", require("dojo/store/JsonRest")); 12 | 13 | parser.parse(); -------------------------------------------------------------------------------- /dgrid_07_dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 07 - dropdown - dojo-webpack-config 6 | 7 | 8 | 9 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /dgrid_06_summary_row.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 06 - summary row - dojo-webpack-config 6 | 7 | 8 | 9 | 10 |

Demo: SummaryRow Mixin

11 |
12 |

Same demo, in a grid with columnsets

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/dgrid_07_dropdown.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/drop_down/ 2 | var Select = require("./for-dgrid-demos/Select"); 3 | var dom = require("dojo/dom"); 4 | var Memory = require("dstore/Memory"); 5 | 6 | var select = new Select({ 7 | collection: new Memory({ 8 | idProperty: 'id', 9 | data: [ 10 | { id: 0, name: 'One', value: 1 }, 11 | { id: 1, name: 'Two', value: 2 }, 12 | { id: 2, name: 'Three', value: 3 }, 13 | { id: 3, name: 'Four', value: 4 } 14 | ] 15 | }) 16 | }, 'select'); 17 | select.startup(); -------------------------------------------------------------------------------- /dgrid_02_stores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 02 - stores - dojo-webpack-config 6 | 7 | 8 | 9 |

Demo: Querying and Sorting Programmatically

10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/dgrid_04_comp_col.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/defining_grid_structures/ 2 | var declare = require('dojo/_base/declare'); 3 | var RequestMemory = require('dstore/RequestMemory'); 4 | var OnDemandGrid = require('dgrid/OnDemandGrid'); 5 | var CompoundColumns = require('dgrid/extensions/CompoundColumns'); 6 | 7 | var CustomGrid = declare([ OnDemandGrid, CompoundColumns ]); 8 | var grid = new CustomGrid({ 9 | collection: new RequestMemory({ target: 'example-resources/hof-batting.json' }), 10 | columns: [ 11 | { 12 | label: 'Full Name', 13 | children: [ 14 | { field: 'first', label: 'First' }, 15 | { field: 'last', label: 'Last' } 16 | ] 17 | }, 18 | { field: 'totalGAB', label: 'Games as Batter' } 19 | ] 20 | }, 'grid'); 21 | 22 | grid.startup(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dojo-webpack-loader-examples", 3 | "version": "1.0.0", 4 | "description": "Examples for dojo-webpack-loader", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Nordth/dojo-webpack-loader-examples.git" 12 | }, 13 | "keywords": [ 14 | "dojo", 15 | "webpack", 16 | "toolkit", 17 | "dgrid", 18 | "dstore", 19 | "loader", 20 | "examples" 21 | ], 22 | "author": "Nordth", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/Nordth/dojo-webpack-loader-examples/issues" 26 | }, 27 | "homepage": "https://github.com/Nordth/dojo-webpack-loader-examples#readme", 28 | "dependencies": { 29 | "dojo-webpack-loader": "^0.9.1", 30 | "webpack": "^1.12.15" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example-resources/examples.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | width: 700px; 3 | margin: 10px; 4 | } 5 | 6 | /* Default all cells to 80px width */ 7 | .grid .dgrid-cell { 8 | width: 80px; 9 | } 10 | 11 | /* Make the columns for first/last name wider */ 12 | .grid .field-first, 13 | .grid .field-last { 14 | width: 100px; 15 | } 16 | 17 | /* 18 | For the columnset example, make each columnset occupy 19 | half the total grid width. 20 | */ 21 | .grid .dgrid-column-set-cell { 22 | width: 50%; 23 | } 24 | 25 | .summary-row { 26 | font-weight: bold; 27 | } 28 | 29 | .dgrid { 30 | width: 500px; 31 | margin: 1em; 32 | } 33 | 34 | .dgrid-cell { 35 | width: 100px; 36 | } 37 | 38 | .field-name, .dgrid-column-set-0 { 39 | width: 200px; 40 | } 41 | 42 | .dgrid-column-set-0 .field-name { 43 | /* When rendered within the column set, simply fit the column set */ 44 | width: 100%; 45 | } 46 | 47 | #gridColumnSet { 48 | height: 15em; 49 | } -------------------------------------------------------------------------------- /example-resources/dijit_demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | outline: none !important; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 2em; 8 | font-family: Lucida Sans,Lucida Grande,Arial !important; 9 | font-size: 13px !important; 10 | background: white; 11 | color: #333; 12 | } 13 | 14 | button { 15 | -webkit-transition: background-color 0.2s linear; 16 | border-radius:4px; 17 | -moz-border-radius: 4px 4px 4px 4px; 18 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 19 | background-color: #E4F2FF; 20 | background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/form/images/button.png"); 21 | background-position: center top; 22 | background-repeat: repeat-x; 23 | border: 1px solid #769DC0; 24 | padding: 2px 8px 4px; 25 | font-size:1em; 26 | } 27 | 28 | button:hover { 29 | background-color: #AFD9FF; 30 | color: #000000; 31 | } 32 | 33 | h1 { 34 | font-size:1.5em; 35 | } 36 | 37 | .break 38 | { 39 | float:none; 40 | clear:both; 41 | } -------------------------------------------------------------------------------- /src/dgrid_01_hello.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/hello_dgrid/ 2 | var declare = require('dojo/_base/declare'); 3 | var Grid = require('dgrid/Grid'); 4 | var Keyboard = require('dgrid/Keyboard'); 5 | var Selection = require('dgrid/Selection'); 6 | 7 | var data = [ 8 | { first: 'Bob', last: 'Barker', age: 89 }, 9 | { first: 'Vanna', last: 'White', age: 55 }, 10 | { first: 'Pat', last: 'Sajak', age: 65 } 11 | ]; 12 | 13 | // Create a new constructor by mixing in the components 14 | var CustomGrid = declare([ Grid, Keyboard, Selection ]); 15 | 16 | // Now, create an instance of our custom grid which 17 | // have the features we added! 18 | var grid = new CustomGrid({ 19 | columns: { 20 | first: 'First Name', 21 | last: 'Last Name', 22 | age: 'Age' 23 | }, 24 | // for Selection; only select a single row at a time 25 | selectionMode: 'single', 26 | // for Keyboard; allow only row-level keyboard navigation 27 | cellNavigation: false 28 | }, 'grid'); 29 | grid.renderArray(data); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Nordth 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/dojo_02_topic.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/events/index.html 2 | var on = require("dojo/on"); 3 | var topic = require("dojo/topic"); 4 | var dom = require("dojo/dom"); 5 | var domConstruct = require("dojo/dom-construct"); 6 | 7 | var alertButton = dom.byId("alertButton"), 8 | createAlert = dom.byId("createAlert"); 9 | 10 | on(alertButton, "click", function() { 11 | // When this button is clicked, 12 | // publish to the "alertUser" topic 13 | topic.publish("alertUser", "I am alerting you."); 14 | }); 15 | 16 | on(createAlert, "click", function(evt){ 17 | // Create another button 18 | var anotherButton = domConstruct.create("button", { 19 | innerHTML: "Another alert button" 20 | }, createAlert, "after"); 21 | 22 | // When the other button is clicked, 23 | // publish to the "alertUser" topic 24 | on(anotherButton, "click", function(evt){ 25 | topic.publish("alertUser", "I am also alerting you."); 26 | }); 27 | }); 28 | 29 | // Register the alerting routine with the "alertUser" 30 | // topic. 31 | topic.subscribe("alertUser", function(text){ 32 | alert(text); 33 | }); -------------------------------------------------------------------------------- /example-resources/Select.css: -------------------------------------------------------------------------------- 1 | .mySelect { 2 | border: 1px solid #b5bcc7; 3 | background-color: #fff; 4 | 5 | height: 17px; 6 | position: relative; 7 | padding: 0; 8 | } 9 | .mySelect .label { 10 | line-height: 17px; 11 | vertical-align: middle; 12 | } 13 | .mySelect .arrow { 14 | position: absolute; 15 | top: 0; 16 | right: 0; 17 | background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/form/images/commonFormArrows.png"); 18 | background-position: -35px 70%; 19 | background-repeat: no-repeat; 20 | width: 16px; 21 | height: 16px; 22 | border: 1px solid #fff; 23 | border-top: none; 24 | background-color: #efefef; 25 | } 26 | 27 | .mySelect .dgrid { 28 | cursor: default; 29 | display: none; 30 | position: absolute; 31 | top: 17px; 32 | left: -1px; 33 | height: auto; 34 | max-height: 20em; 35 | width: 100%; 36 | } 37 | .mySelect .dgrid-scroller { 38 | position: relative; 39 | } 40 | 41 | .mySelect .opened { 42 | display: block; 43 | } 44 | 45 | .mySelect .One { 46 | color: blue; 47 | } 48 | .mySelect .Two { 49 | color: red; 50 | } 51 | .mySelect .Three { 52 | color: green; 53 | } 54 | .mySelect .Four { 55 | color: orange; 56 | } 57 | -------------------------------------------------------------------------------- /src/for-dgrid-demos/SingleQuery.js: -------------------------------------------------------------------------------- 1 | // From: http://dgrid.io/tutorials/1.0/single_query/demo/my/SingleQuery.js 2 | var declare = require('dojo/_base/declare'); 3 | var _StoreMixin = require('dgrid/_StoreMixin'); 4 | 5 | module.exports = declare(_StoreMixin, { 6 | // summary: 7 | // dgrid mixin which implements the refresh method to always perform 8 | // a single query with no start or count specified, to retrieve all 9 | // relevant results at once. Appropriate for grids using memory stores 10 | // with small result set sizes. 11 | 12 | refresh: function () { 13 | var self = this; 14 | 15 | // First defer to List#refresh to clear the grid's previous content 16 | this.inherited(arguments); 17 | 18 | if (!this._renderedCollection) { 19 | return; 20 | } 21 | 22 | return this._trackError(function () { 23 | return self.renderQueryResults(self._renderedCollection.fetch()); 24 | }); 25 | }, 26 | 27 | renderArray: function () { 28 | var rows = this.inherited(arguments); 29 | 30 | // Clear _lastCollection which is ordinarily only used for store-less grids 31 | this._lastCollection = null; 32 | 33 | return rows; 34 | } 35 | }); -------------------------------------------------------------------------------- /dijit_05_templated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dijit 05 - templated - dojo-webpack-config 6 | 7 | 8 | 23 | 24 | 25 |

Demo: Using _TemplatedMixin

26 |
27 |
Don't forget to click on the title!
28 |

This is arbitrary content!

29 | 30 |

More arbitrary content!

31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /dijit_01_key_nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dijit 01 - key nav - dojo-webpack-config 6 | 7 | 22 | 23 |

Click on a cell below, then try navigating:

24 | 29 |

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
applebananaorange
peargrapesstrawberry
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /dgrid_05_single_query.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DGrid 05 - single query - dojo-webpack-config 6 | 7 | 8 | 30 | 31 | 32 |

Demo: Single-Query Mixin with Auto-Height

33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /src/for-dijit-demos/SomeWidget.js: -------------------------------------------------------------------------------- 1 | var declare = require("dojo/_base/declare"); 2 | var _WidgetBase = require("dijit/_WidgetBase"); 3 | var _OnDijitClickMixin = require("dijit/_OnDijitClickMixin"); 4 | var _TemplatedMixin = require("dijit/_TemplatedMixin"); 5 | var template = require("raw!./SomeWidget.html"); 6 | 7 | var dojoRequire = require("dojo-webpack-loader/lib/dojo-require"); // We should register widget to able using it in templates 8 | module.exports = dojoRequire.register("demo/SomeWidget", 9 | declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], { 10 | // set our template 11 | templateString: template, 12 | 13 | // some properties 14 | baseClass: "someWidget", 15 | title: "", // we'll set this from the widget def 16 | 17 | // hidden counter 18 | _counter: 1, 19 | _firstClicked: false, 20 | 21 | // define an onClick handler 22 | _onClick: function(){ 23 | if(this._firstClicked){ 24 | this.titleNode.innerHTML = this.title + " was clicked " + (++this._counter) + " times."; 25 | } else { 26 | this.titleNode.innerHTML = this.title + " was clicked!"; 27 | this._firstClicked = true; 28 | } 29 | }, 30 | 31 | postCreate: function(){ 32 | this.titleNode.innerHTML = this.title; 33 | } 34 | })); 35 | 36 | -------------------------------------------------------------------------------- /src/dgrid_05_single_query.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/single_query/ 2 | var declare = require('dojo/_base/declare'); 3 | var dom = require('dojo/dom'); 4 | var on = require('dojo/on'); 5 | var RequestMemory = require('dstore/RequestMemory'); 6 | var Grid = require('dgrid/Grid'); 7 | var SingleQuery = require('./for-dgrid-demos/SingleQuery'); 8 | 9 | // Once the response is received, build an in-memory store with the data 10 | var store = new RequestMemory({ target: 'example-resources/hof-batting.json' }); 11 | 12 | // Create an instance of OnDemandGrid referencing the store 13 | var grid = window.grid = new (declare([ Grid, SingleQuery ]))({ 14 | className: 'dgrid-autoheight', 15 | collection: store, 16 | sort: 'last', // Initialize sort on last name, ascending 17 | columns: { 18 | first: 'First Name', 19 | last: 'Last Name', 20 | totalG: 'Games Played' 21 | } 22 | }, 'grid'); 23 | 24 | on(dom.byId('queryForm'), 'submit', function(event) { 25 | event.preventDefault(); 26 | grid.set('collection', store.filter({ 27 | // Pass a RegExp to Memory's filter method 28 | // Note: this code does not go out of its way to escape 29 | // characters that have special meaning in RegExps 30 | last: new RegExp(this.elements.last.value, 'i') 31 | })); 32 | }); 33 | 34 | on(dom.byId('queryForm'), 'reset', function() { 35 | // Reset the collection when the form is reset 36 | grid.set('collection', store); 37 | }); -------------------------------------------------------------------------------- /src/dijit_04_menus.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/menus/demo/ComboButton.html 2 | var dom = require("dojo/dom"); 3 | var parser = require("dojo/parser"); 4 | var registry = require("dijit/registry"); 5 | var Menu = require("dijit/Menu"); 6 | var MenuItem = require("dijit/MenuItem"); 7 | var ComboButton = require("dijit/form/ComboButton"); 8 | var DropDownButton = require("dijit/form/DropDownButton"); 9 | require("dijit/WidgetSet"); // for registry.byClass 10 | 11 | // a menu item selection handler 12 | var onItemSelect = function(evt){ 13 | dom.byId("lastSelected").innerHTML = this.get("label"); 14 | }; 15 | 16 | var menu = new Menu({ id: "mainMenu" }); 17 | 18 | // create child item widgets for each 19 | // of 'edit','view','task' 20 | menu.addChild(new MenuItem({ 21 | label: "Edit" 22 | }) ); 23 | 24 | menu.addChild(new MenuItem({ 25 | label: "View" 26 | }) ); 27 | 28 | menu.addChild(new MenuItem({ 29 | label: "Task" 30 | }) ); 31 | 32 | // create a ComboButton and DropDownButton and add the Menu to each 33 | var comboBtn = new ComboButton({ 34 | label: "Do Something", 35 | dropDown: menu 36 | }, "comboBtn"); 37 | 38 | var dropDownBtn = new DropDownButton({ 39 | label: "Select Action", 40 | dropDown: menu 41 | }, "dropDownBtn"); 42 | 43 | menu.startup(); 44 | comboBtn.startup(); 45 | dropDownBtn.startup(); 46 | 47 | parser.parse(); 48 | 49 | registry.byClass("dijit.MenuItem").forEach(function(item){ 50 | item.on("click", onItemSelect); 51 | }); -------------------------------------------------------------------------------- /src/dojo_04_request.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/ajax/demo/dojo-request-script-pulls.html 2 | var dom = require("dojo/dom"); 3 | var on = require("dojo/on"); 4 | var script = require("dojo/request/script"); 5 | var domConstruct = require("dojo/dom-construct"); 6 | var arrayUtil = require("dojo/_base/array"); 7 | 8 | var pullsNode = dom.byId("pullrequests"); 9 | 10 | // Attach the onclick event handler to tweetButton 11 | on(dom.byId("pullrequestsButton"), "click", function(evt){ 12 | // Request the open pull requests from Dojo's GitHub repo 13 | script.get("https://api.github.com/repos/dojo/dojo/pulls", { 14 | // Use the "callback" query parameter to tell 15 | // GitHub's services the name of the function 16 | // to wrap the data in 17 | jsonp: "callback" 18 | }).then(function(response){ 19 | // Empty the tweets node 20 | domConstruct.empty(pullsNode); 21 | 22 | // Create a document fragment to keep from 23 | // doing live DOM manipulation 24 | var fragment = document.createDocumentFragment(); 25 | 26 | // Loop through each pull request and create a list item 27 | // for it 28 | arrayUtil.forEach(response.data, function(pull){ 29 | var li = domConstruct.create("li", {}, fragment); 30 | var link = domConstruct.create("a", {href: pull.url, innerHTML: pull.title}, li); 31 | }); 32 | 33 | // Append the document fragment to the list 34 | domConstruct.place(fragment, pullsNode); 35 | }); 36 | }); -------------------------------------------------------------------------------- /src/dgrid_03_col_set.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/defining_grid_structures/ 2 | var declare = require('dojo/_base/declare'); 3 | var RequestMemory = require('dstore/RequestMemory'); 4 | var OnDemandGrid = require('dgrid/OnDemandGrid'); 5 | var ColumnSet = require('dgrid/ColumnSet'); 6 | 7 | var CustomGrid = declare([ OnDemandGrid, ColumnSet ]); 8 | var grid = new CustomGrid({ 9 | collection: new RequestMemory({ target: 'example-resources/hof-batting.json' }), 10 | columnSets: [ 11 | [ 12 | [ 13 | { field: 'first', label: 'First'}, 14 | { field: 'last', label: 'Last' } 15 | ], 16 | [ 17 | { field: 'bats', label: 'Bats' }, 18 | { field: 'throws', label: 'Throws' } 19 | ] 20 | ], 21 | [ 22 | [ 23 | { field: 'totalG', label: 'G' }, 24 | { field: 'totalAB', label: 'AB' }, 25 | { field: 'totalR', label: 'R' }, 26 | { field: 'totalRBI', label: 'RBI' }, 27 | { field: 'totalBB', label: 'BB' }, 28 | { field: 'totalK', label: 'K' } 29 | ], 30 | [ 31 | { field: 'totalGAB', label: 'Games as Batter', colSpan: 2 }, 32 | { field: 'totalH', label: 'H' }, 33 | { field: 'total2B', label: '2B' }, 34 | { field: 'total3B', label: '3B' }, 35 | { field: 'totalHR', label: 'HR' } 36 | ] 37 | ] 38 | ] 39 | }, 'grid'); 40 | 41 | grid.startup(); -------------------------------------------------------------------------------- /dojo_02_topic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dojo 02 - topic - dojo-webpack-config 6 | 7 | 50 | 51 |

Demo: Publish and Subscribe with dojo/topic

52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /dijit_04_menus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dijit 04 - menus - dojo-webpack-config 6 | 7 | 8 | 9 | 10 |

This page demonstrates declarative and programmatic usage of 11 | dijit/Menu inside dijit/form/ComboButton and 12 | dijit/form/DropDownButton. 13 |

14 |

Declarative Demo

15 | 16 |
17 | Do Something 18 |
19 |
Edit
20 |
View
21 |
Task
22 |
23 |
24 | 32 | 33 |

Programmatic Demo

34 |
35 | 36 |

Last selected: none

37 | 38 | 39 | -------------------------------------------------------------------------------- /dojo_04_request.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dojo 04 - request - dojo-webpack-config 6 | 7 | 50 | 51 |

Demo: dojo/request/script

52 |

Click the button below to see dojo/request/script request recent pull requests for Dojo's GitHub repo.

53 |
54 | 55 |
56 |

57 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /src/dgrid_02_stores.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/grids_and_stores/ 2 | var dom = require('dojo/dom'); 3 | var on = require('dojo/on'); 4 | var RequestMemory = require('dstore/RequestMemory'); 5 | var OnDemandGrid = require('dgrid/OnDemandGrid'); 6 | 7 | // Once the response is received, build an in-memory store with the data 8 | var store = new RequestMemory({ target: 'example-resources/hof-batting.json' }); 9 | 10 | // Create an instance of OnDemandGrid referencing the store 11 | var grid = window.grid = new OnDemandGrid({ 12 | collection: store, 13 | sort: 'last', // Initialize sort on last name, ascending 14 | columns: { 15 | first: 'First Name', 16 | last: 'Last Name', 17 | totalG: 'Games Played' 18 | } 19 | }, 'grid'); 20 | 21 | grid.startup(); 22 | 23 | on(dom.byId('queryForm'), 'submit', function(event) { 24 | event.preventDefault(); 25 | grid.set('collection', store.filter({ 26 | // Pass a RegExp to Memory's filter method 27 | // Note: this code does not go out of its way to escape 28 | // characters that have special meaning in RegExps 29 | last: new RegExp(this.elements.last.value, 'i') 30 | })); 31 | }); 32 | 33 | on(dom.byId('queryForm'), 'reset', function() { 34 | // Reset the query when the form is reset 35 | grid.set('collection', store); 36 | }); 37 | 38 | on(dom.byId('sortLastAsc'), 'click', function() { 39 | // Simple case: pass a string representing field to be 40 | // sorted in ascending order 41 | grid.set('sort', 'last'); 42 | }); 43 | 44 | on(dom.byId('sortGamesDesc'), 'click', function() { 45 | // Advanced case: pass array of objects, following 46 | // the same format as sort in dstore 47 | grid.set('sort', [ { property: 'totalG', descending: true } ]); 48 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Examples for dojo-webpack-loader 2 | [dojo-webpack-loader](https://github.com/Nordth/dojo-webpack-loader) adapts modules of Dojo Toolkit v. 1.x (actually, tested with 1.10 version) so they can be bundled by webpack and used out of Dojo Toolkit ecosystem 3 | 4 | Examples in this repo are based on tutorials of Dgrid and Dojo 5 | 6 | Webpack config for examples: https://github.com/Nordth/dojo-webpack-loader-examples/blob/master/webpack.config.js 7 | 8 | ## Examples in action: 9 | ### Dgrid 10 | 11 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_01_hello.html 12 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_02_stores.html 13 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_03_col_set.html 14 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_04_comp_col.html 15 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_05_single_query.html 16 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_06_summary_row.html 17 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dgrid_07_dropdown.html 18 | 19 | ### Dojo & Dijit 20 | 21 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dijit_01_key_nav.html 22 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dijit_02_layout.html 23 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dijit_03_form.html (i know here is a problem with icons) 24 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dijit_04_menus.html 25 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dijit_05_templated.html 26 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dojo_01_animation.html 27 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dojo_02_topic.html 28 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dojo_03_keyboard.html 29 | - https://rawgit.com/Nordth/dojo-webpack-loader-examples/master/dojo_04_request.html 30 | 31 | -------------------------------------------------------------------------------- /src/dojo_01_animation.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/animation/index.html 2 | var baseFx = require("dojo/_base/fx"); 3 | var fx = require("dojo/fx"); 4 | var easing = require("dojo/fx/easing"); 5 | var domStyle = require("dojo/dom-style"); 6 | var dom = require("dojo/dom"); 7 | var aspect = require("dojo/aspect"); 8 | var on = require("dojo/on"); 9 | 10 | // define a function to return the animation which 11 | // swaps the positions of 2 nodes 12 | function swapAnim(node1, node2) { 13 | var posn1 = parseInt(domStyle.get(node1, "left")), 14 | posn2 = parseInt(domStyle.get(node2, "left")); 15 | 16 | return moveNodes = fx.combine([ 17 | fx.slideTo({ 18 | duration: 1200, 19 | node: node2, 20 | left: posn1 21 | }), 22 | fx.slideTo({ 23 | duration: 1200, 24 | node: node1, 25 | left: posn2 26 | }) 27 | ]); 28 | } 29 | 30 | 31 | var originalOrder = true; // track which order our content nodes are in 32 | 33 | var swapButton = dom.byId("swapButton"), 34 | c1 = originalOrder ? dom.byId("content1") : dom.byId("content2"), 35 | c2 = originalOrder ? dom.byId("content2") : dom.byId("content1"), 36 | container = dom.byId("container"); 37 | 38 | // Set up a click handlers to run our animations 39 | on(swapButton, "click", function(evt){ 40 | 41 | // chain the swap nodes animation 42 | // with another to fade out a background color in our container 43 | var anim = fx.chain([ 44 | swapAnim(c1, c2), 45 | baseFx.animateProperty({ 46 | node: container, 47 | properties: { 48 | backgroundColor: "#fff" 49 | } 50 | }) 51 | ]); 52 | // before the animation begins, set initial container background 53 | aspect.before(anim, "beforeBegin", function(){ 54 | domStyle.set(container, "backgroundColor", "#eee"); 55 | }); 56 | 57 | // when the animation ends, toggle the originalOrder 58 | on(anim, "End", function(n1, n2){ 59 | originalOrder = !originalOrder; 60 | }); 61 | 62 | anim.play(); 63 | }); -------------------------------------------------------------------------------- /dojo_03_keyboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dojo 03 - keyboard - dojo-webpack-config 6 | 7 | 64 | 65 |

Press Up/Down Arrow Or Enter Keys to traverse form.

66 |

Home/End will go to the beginning or end.

67 |
68 | First Name: 69 | Last Name: 70 | Email Address: 71 | Phone Number: 72 | 73 |
74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var path = require("path"); 3 | 4 | var entry_list = [ 5 | "dojo_01_animation", 6 | "dojo_02_topic", 7 | "dojo_03_keyboard", 8 | "dojo_04_request", 9 | "dijit_01_key_nav", 10 | "dijit_02_layout", 11 | "dijit_03_form", 12 | "dijit_04_menus", 13 | "dijit_05_templated", 14 | "dgrid_01_hello", 15 | "dgrid_02_stores", 16 | "dgrid_03_col_set", 17 | "dgrid_04_comp_col", 18 | "dgrid_05_single_query", 19 | "dgrid_06_summary_row", 20 | "dgrid_07_dropdown" 21 | ]; 22 | var entry = {}; 23 | entry_list.forEach(function(e) { entry[e] = path.resolve(__dirname, "./src/" + e) }); 24 | 25 | module.exports = { 26 | entry: entry, 27 | resolveLoader: { 28 | modulesDirectories: [ 29 | path.resolve(__dirname, './node_modules/') 30 | ] 31 | }, 32 | resolve: { 33 | alias: { 34 | "dojo": path.resolve(__dirname, './dojo/dojo'), 35 | "dstore": path.resolve(__dirname, './dojo/dstore'), 36 | "dijit": path.resolve(__dirname, './dojo/dijit'), 37 | "dgrid": path.resolve(__dirname, './dojo/dgrid') 38 | } 39 | }, 40 | devtool: 'source-map', 41 | module: { 42 | loaders: [ 43 | { 44 | test: /\.js$/, 45 | loader: "dojo-webpack-loader", 46 | include: path.resolve(__dirname, '../dojo/'), 47 | }, 48 | ] 49 | }, 50 | output: { 51 | path: path.resolve(__dirname, 'bundle/'), 52 | publicPath: "bundle/", 53 | filename: "[name].bundle.js" 54 | }, 55 | 56 | dojoWebpackLoader: { 57 | // We should specify paths to core and dijit modules because we using both 58 | dojoCorePath: path.resolve(__dirname, './dojo/dojo'), 59 | dojoDijitPath: path.resolve(__dirname, './dojo/dijit'), 60 | 61 | // Languages for dojo/nls module which will be in result pack. 62 | includeLanguages: ['en', 'ru', 'fr'] 63 | } 64 | 65 | // Minimal config if dijit package is not used: 66 | // dojoWebpackLoader: { 67 | // dojoCorePath: path.resolve(__dirname, './dojo/dojo') 68 | //} 69 | 70 | 71 | }; -------------------------------------------------------------------------------- /dojo_01_animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dojo 01 - animation - dojo-webpack-config 6 | 7 | 41 | 42 |

Demo: Combining and Chaining Animations

43 | 44 | 45 | 46 |
47 |
48 |
1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
49 |
50 |
51 |
2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/dgrid_06_summary_row.js: -------------------------------------------------------------------------------- 1 | // Example from: http://dgrid.io/tutorials/1.0/summary_row/ 2 | var declare = require('dojo/_base/declare'); 3 | var lang = require('dojo/_base/lang'); 4 | var dom = require('dojo/dom'); 5 | var on = require('dojo/on'); 6 | var Memory = require('dstore/Memory'); 7 | var OnDemandGrid = require('dgrid/OnDemandGrid'); 8 | var ColumnSet = require('dgrid/ColumnSet'); 9 | var SummaryRow = require('./for-dgrid-demos/SummaryRow'); 10 | 11 | var store = new Memory({ data: [ 12 | { id: 1, name: 'Create child widget 1', user1: 0.5, user2: 0, user3: 0, user4: 7 }, 13 | { id: 2, name: 'Create child widget 2', user1: 0.5, user2: 0, user3: 7, user4: 0 }, 14 | { id: 3, name: 'Create parent widget', user1: 3, user2: 0, user3: 0.5, user4: 0.5 }, 15 | { id: 4, name: 'Write documentation', user1: 1, user2: 7, user3: 0, user4: 0 }, 16 | { id: 5, name: 'Push updated build', user1: 0.5, user2: 0, user3: 1, user4: 0 } 17 | ]}); 18 | 19 | store.getTotals = function () { 20 | var totals = {}; 21 | totals.user1 = totals.user2 = totals.user3 = totals.user4 = 0; 22 | 23 | for (var i = this.data.length; i--;) { 24 | for (var k in totals) { 25 | totals[k] += this.data[i][k]; 26 | } 27 | } 28 | 29 | totals.name = 'Total'; 30 | return totals; 31 | } 32 | 33 | // Create an instance of OnDemandGrid referencing the store 34 | var commonArgs = { 35 | className: 'dgrid-autoheight', 36 | collection: store, 37 | sort: 'name' 38 | }; 39 | var grid = new (declare([ OnDemandGrid, SummaryRow ]))(lang.mixin({ 40 | columns: { 41 | name: 'Name', 42 | user1: 'John', 43 | user2: 'Jane', 44 | user3: 'Joe', 45 | user4: 'Kate' 46 | } 47 | }, commonArgs), 'grid'); 48 | var gridColumnSet = new (declare([ OnDemandGrid, ColumnSet, SummaryRow ]))(lang.mixin({ 49 | columnSets: [ 50 | [[ 51 | { field: 'name', label: 'Name' } 52 | ]], 53 | [[ 54 | { field: 'user1', label: 'John' }, 55 | { field: 'user2', label: 'Jane' }, 56 | { field: 'user3', label: 'Joe' }, 57 | { field: 'user4', label: 'Kate' } 58 | ]] 59 | ] 60 | }, commonArgs), 'gridColumnSet'); 61 | 62 | var totals = store.getTotals(); 63 | grid.set('summary', totals); 64 | gridColumnSet.set('summary', totals); -------------------------------------------------------------------------------- /src/dojo_03_keyboard.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/key_events/index.html 2 | var dom = require("dojo/dom"); 3 | var domConstruct = require("dojo/dom-construct"); 4 | var on = require("dojo/on"); 5 | var query = require("dojo/query"); 6 | var keys = require("dojo/keys"); 7 | require("dojo/NodeList-traverse"); 8 | 9 | var inputs = query("input"); 10 | 11 | function log(msg){ 12 | var c = dom.byId("console"); 13 | if(!c){ 14 | c = domConstruct.create("div", { 15 | id: "console" 16 | }, document.body); 17 | } 18 | c.innerHTML += "
" + msg + "
"; 19 | } 20 | 21 | on(dom.byId("traverseForm"), "keydown", function(event) { 22 | var node = query.NodeList([event.target]); 23 | var nextNode; 24 | 25 | //on listens for the keydown events inside of the div node, on all form elements 26 | switch(event.keyCode) { 27 | case keys.UP_ARROW: 28 | nextNode = node.prev("input"); 29 | if(nextNode[0]){ 30 | //if not first element 31 | nextNode[0].focus(); 32 | //moving the focus from the current element to the previous 33 | } 34 | break; 35 | case keys.DOWN_ARROW: 36 | nextNode = node.next("input"); 37 | if(nextNode[0]){ 38 | //if not last element 39 | nextNode[0].focus(); 40 | //moving the focus from the current element to the next 41 | } 42 | break; 43 | case keys.HOME: 44 | inputs[0].focus(); 45 | break; 46 | case keys.END: 47 | inputs[inputs.length - 2].focus(); 48 | break; 49 | case keys.ENTER: 50 | event.preventDefault(); 51 | //prevent default keeps the form from submitting when the enter button is pressed 52 | //on the submit button 53 | if(event.target.type !== "submit"){ 54 | nextNode = node.next("input"); 55 | if(nextNode[0]){ 56 | //if not last element 57 | nextNode[0].focus(); 58 | //moving the focus from the current element to the next 59 | } 60 | }else { 61 | // submit the form 62 | log("form submitted!"); 63 | } 64 | break; 65 | default: 66 | log("some other key: " + event.keyCode); 67 | } 68 | }); -------------------------------------------------------------------------------- /src/for-dgrid-demos/Select.js: -------------------------------------------------------------------------------- 1 | // From: http://dgrid.io/tutorials/1.0/drop_down/demo//my/Select.js 2 | var declare = require('dojo/_base/declare'); 3 | var on = require('dojo/on'); 4 | var dom = require('dojo/dom'); 5 | var domConstruct = require('dojo/dom-construct'); 6 | var domClass = require('dojo/dom-class'); 7 | var _WidgetBase = require('dijit/_WidgetBase'); 8 | var _TemplatedMixin = require('dijit/_TemplatedMixin'); 9 | var List = require('dgrid/OnDemandList'); 10 | var Selection = require('dgrid/Selection'); 11 | var template = require('raw!./Select.html'); 12 | 13 | var DropDown = declare([ List, Selection ]); 14 | 15 | module.exports = declare([ _WidgetBase, _TemplatedMixin ], { 16 | baseClass: 'mySelect', 17 | 18 | name: '', 19 | value: null, 20 | 21 | templateString: template, 22 | 23 | buildRendering: function () { 24 | this.inherited(arguments); 25 | 26 | this.list = new DropDown({ 27 | selectionMode: 'single', 28 | showHeader: false, 29 | collection: this.collection, 30 | renderRow: this.renderItem 31 | }, this.listNode); 32 | 33 | var self = this; 34 | this.on('.button:click', function () { 35 | self.toggle(); 36 | }); 37 | 38 | this.list.on('dgrid-select', function (event) { 39 | self.set('value', event.rows[0].id); 40 | self.toggle(false); 41 | }); 42 | 43 | this.own(this.list); 44 | }, 45 | 46 | startup: function () { 47 | var self = this, 48 | collection = this.collection; 49 | if (this._started) { 50 | return; 51 | } 52 | 53 | this.inherited(arguments); 54 | 55 | if (!this.value && collection) { 56 | collection.fetch().then(function (items) { 57 | self.set('value', collection.getIdentity(items[0])); 58 | }); 59 | } 60 | }, 61 | 62 | _setValueAttr: function (value) { 63 | var self = this; 64 | this.collection.get(value).then(function (item) { 65 | if (item) { 66 | domConstruct.place(self.renderItem(item), 67 | self.labelNode, 'only'); 68 | self._set('value', value); 69 | } 70 | }); 71 | }, 72 | 73 | toggle: function (state) { 74 | if (typeof state === 'undefined') { 75 | state = !this.opened; 76 | } 77 | this.opened = state; 78 | 79 | domClass.toggle(this.list.domNode, 'opened', this.opened); 80 | if (state && !this.list._started) { 81 | this.list.startup(); 82 | } 83 | }, 84 | 85 | renderItem: function (item) { 86 | var divNode = domConstruct.create('div', { className: item.name }); 87 | domConstruct.place(document.createTextNode(item.name), divNode); 88 | return divNode; 89 | } 90 | }); 91 | -------------------------------------------------------------------------------- /dijit_03_form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dijit 03 - form - dojo-webpack-config 6 | 7 | 8 | 9 | 35 | 36 |

37 | Demo: Dijit Form widgets 38 |

39 | 40 |
41 | 42 | 43 | 46 | 49 | 50 | 51 | 54 | 57 | 58 | 59 | 62 | 68 | 69 | 70 | 73 | 76 | 77 |
44 | 45 | 47 | 48 |
52 | 53 | 55 | 56 |
60 | 61 | 63 |
64 | 67 |
71 | 72 | 74 | 75 |
78 |
79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /src/for-dgrid-demos/SummaryRow.js: -------------------------------------------------------------------------------- 1 | // From http://dgrid.io/tutorials/1.0/summary_row/demo/my/SummaryRow.js 2 | var declare = require('dojo/_base/declare'); 3 | var lang = require('dojo/_base/lang'); 4 | var domConstruct = require('dojo/dom-construct'); 5 | 6 | module.exports = declare(null, { 7 | // summary: 8 | // A mixin for dgrid components which renders 9 | // a row with summary information (e.g. totals). 10 | 11 | // Show the footer area, which will hold the summary row 12 | showFooter: true, 13 | 14 | buildRendering: function () { 15 | this.inherited(arguments); 16 | 17 | var areaNode = this.summaryAreaNode = 18 | domConstruct.create('div', { 19 | className: 'summary-row', 20 | role: 'row', 21 | style: { overflow: 'hidden' } 22 | }, this.footerNode); 23 | 24 | // Keep horizontal alignment in sync 25 | this.on('scroll', lang.hitch(this, function () { 26 | areaNode.scrollLeft = this.getScrollPosition().x; 27 | })); 28 | 29 | // Process any initially-passed summary data 30 | if (this.summary) { 31 | this._setSummary(this.summary); 32 | } 33 | }, 34 | 35 | _updateColumns: function () { 36 | this.inherited(arguments); 37 | if (this.summary) { 38 | // Re-render summary row for existing data, 39 | // based on new structure 40 | this._setSummary(this.summary); 41 | } 42 | }, 43 | 44 | _renderSummaryCell: function (item, cell, column) { 45 | // summary: 46 | // Simple method which outputs data for each 47 | // requested column into a text node in the 48 | // passed cell element. Honors columns' 49 | // get, formatter, and renderCell functions. 50 | // renderCell is called with an extra flag, 51 | // so custom implementations can react to it. 52 | 53 | var value = item[column.field] || ''; 54 | cell.appendChild(document.createTextNode(value)); 55 | }, 56 | 57 | _setSummary: function (data) { 58 | // summary: 59 | // Given an object whose keys map to column IDs, 60 | // updates the cells in the footer row with the 61 | // provided data. 62 | 63 | var tableNode = this.summaryTableNode; 64 | 65 | this.summary = data; 66 | 67 | // Remove any previously-rendered summary row 68 | if (tableNode) { 69 | domConstruct.destroy(tableNode); 70 | } 71 | 72 | // Render row, calling _renderSummaryCell for each cell 73 | tableNode = this.summaryTableNode = 74 | this.createRowCells('td', 75 | lang.hitch(this, '_renderSummaryCell', data)); 76 | this.summaryAreaNode.appendChild(tableNode); 77 | 78 | // Force resize processing, 79 | // in case summary row's height changed 80 | if (this._started) { 81 | this.resize(); 82 | } 83 | } 84 | }); -------------------------------------------------------------------------------- /src/dijit_01_key_nav.js: -------------------------------------------------------------------------------- 1 | // Example from: https://dojotoolkit.org/documentation/tutorials/1.10/key_events/index.html 2 | var declare = require("dojo/_base/declare"); 3 | var arrayUtil = require("dojo/_base/array"); 4 | var parser = require("dojo/parser"); 5 | var query = require("dojo/query"); 6 | var _WidgetBase = require("dijit/_WidgetBase"); 7 | var _KeyNavMixin = require("dijit/_KeyNavMixin"); 8 | 9 | global.MyGrid = declare([_WidgetBase, _KeyNavMixin], { 10 | buildRendering: function(){ 11 | // This is a behavioral widget so we'll just use the existing DOM. 12 | // Alternately we could have a template. 13 | this.inherited(arguments); 14 | 15 | // Set containerNode. Usually this is set in the template. 16 | this.containerNode = this.domNode; 17 | }, 18 | 19 | postCreate: function(){ 20 | // Don't forget the this.inherited() call 21 | this.inherited(arguments); 22 | 23 | // Set tabIndex on the container node, since by default it's not tab navigable 24 | this.domNode.setAttribute("tabIndex", "0"); 25 | }, 26 | 27 | // Specifies which DOMNode children can be focused 28 | childSelector: "td", 29 | 30 | _focusedChildIndex: function(children){ 31 | // summary: 32 | // Helper method to return the index of the currently focused child in the array 33 | return arrayUtil.indexOf(children, this.focusedChild); 34 | }, 35 | 36 | // Home/End key support 37 | _getFirst: function(){ 38 | return this.getChildren()[0]; 39 | }, 40 | _getLast: function(){ 41 | var children = this.getChildren(); 42 | return children[children.length - 1]; 43 | }, 44 | 45 | // Simple arrow key support. Up/down logic assumes that evey row has the same number of cells. 46 | _onLeftArrow: function(){ 47 | var children = this.getChildren(); 48 | this.focusChild(children[(this._focusedChildIndex(children) - 1 + children.length) % children.length]); 49 | }, 50 | _onRightArrow: function(){ 51 | var children = this.getChildren(); 52 | this.focusChild(children[(this._focusedChildIndex(children) + 1) % children.length]); 53 | }, 54 | _numCols: function(){ 55 | // summary: 56 | // Helper method to return the number of columns in the table 57 | return query("tr:first-child > td", this.domNode).length; 58 | }, 59 | _onDownArrow: function(){ 60 | var children = this.getChildren(); 61 | this.focusChild(children[(this._focusedChildIndex(children) + this._numCols()) % children.length]); 62 | }, 63 | _onUpArrow: function(){ 64 | var children = this.getChildren(); 65 | this.focusChild(children[(this._focusedChildIndex(children) - this._numCols() + children.length) % children.length]); 66 | }, 67 | 68 | // Letter key navigation support 69 | _getNext: function(child){ 70 | var children = this.getChildren(); 71 | return children[(arrayUtil.indexOf(children, child) + 1) % children.length]; 72 | } 73 | }); 74 | 75 | global.MyCell = declare(_WidgetBase, { 76 | postCreate: function(){ 77 | this.domNode.setAttribute("tabIndex", "-1"); 78 | }, 79 | focus: function(){ 80 | this.domNode.focus(); 81 | } 82 | }); 83 | 84 | parser.parse(); -------------------------------------------------------------------------------- /dijit_02_layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dijit 02 - layout - dojo-webpack-config 6 | 7 | 8 | 74 | 75 |
76 |
77 |
78 |

Group 1 Content

79 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 80 | dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 81 | ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 82 | nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 83 | anim id est laborum.

84 |
85 |
86 |

Group 2 Content

87 |
88 |
89 |

Group 3 Content

90 |
91 |
92 |
Header content (top)
93 |
Sidebar content (left)
94 |
95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /example-resources/countries.json: -------------------------------------------------------------------------------- 1 | [ 2 |       { 3 |          "id": "AF", 4 |          "name": "Africa", 5 |          "type": "continent", 6 |          "population": "900 million", 7 |          "area": "30,221,532 sq km", 8 |          "timezone": "-1 UTC to +4 UTC", 9 |          "children": [ 10 |             { 11 |                "_reference": "EG" 12 |             }, 13 |             { 14 |                "_reference": "KE" 15 |             }, 16 |             { 17 |                "_reference": "SD" 18 |             } 19 |          ] 20 |       }, 21 |       { 22 |          "id": "EG", 23 |          "name": "Egypt", 24 |          "type": "country" 25 |       }, 26 |       { 27 |          "id": "KE", 28 |          "name": "Kenya", 29 |          "type": "country", 30 |          "children": [ 31 |             { 32 |                "_reference": "Nairobi" 33 |             }, 34 |             { 35 |                "_reference": "Mombasa" 36 |             } 37 |          ] 38 |       }, 39 |       { 40 |          "id": "Nairobi", 41 |          "name": "Nairobi", 42 |          "type": "city" 43 |       }, 44 |       { 45 |          "id": "Mombasa", 46 |          "name": "Mombasa", 47 |          "type": "city" 48 |       }, 49 |       { 50 |          "id": "SD", 51 |          "name": "Sudan", 52 |          "type": "country", 53 |          "children": { 54 |             "_reference": "Khartoum" 55 |          } 56 |       }, 57 |       { 58 |          "id": "Khartoum", 59 |          "name": "Khartoum", 60 |          "type": "city" 61 |       }, 62 |       { 63 |          "id": "AS", 64 |          "name": "Asia", 65 |          "type": "continent", 66 |          "children": [ 67 |             { 68 |                "_reference": "CN" 69 |             }, 70 |             { 71 |                "_reference": "IN" 72 |             }, 73 |             { 74 |                "_reference": "RU" 75 |             }, 76 |             { 77 |                "_reference": "MN" 78 |             } 79 |          ] 80 |       }, 81 |       { 82 |          "id": "CN", 83 |          "name": "China", 84 |          "type": "country" 85 |       }, 86 |       { 87 |          "id": "IN", 88 |          "name": "India", 89 |          "type": "country" 90 |       }, 91 |       { 92 |          "id": "RU", 93 |          "name": "Russia", 94 |          "type": "country" 95 |       }, 96 |       { 97 |          "id": "MN", 98 |          "name": "Mongolia", 99 |          "type": "country" 100 |       }, 101 |       { 102 |          "id": "OC", 103 |          "name": "Oceania", 104 |          "type": "continent", 105 |          "population": "21 million", 106 |          "children": { 107 |             "_reference": "AU" 108 |          } 109 |       }, 110 |       { 111 |          "id": "AU", 112 |          "name": "Australia", 113 |          "type": "country", 114 |          "population": "21 million" 115 |       }, 116 |       { 117 |          "id": "EU", 118 |          "name": "Europe", 119 |          "type": "continent", 120 |          "children": [ 121 |             { 122 |                "_reference": "DE" 123 |             }, 124 |             { 125 |                "_reference": "FR" 126 |             }, 127 |             { 128 |                "_reference": "ES" 129 |             }, 130 |             { 131 |                "_reference": "IT" 132 |             } 133 |          ] 134 |       }, 135 |       { 136 |          "id": "DE", 137 |          "name": "Germany", 138 |          "type": "country" 139 |       }, 140 |       { 141 |          "id": "FR", 142 |          "name": "France", 143 |          "type": "country" 144 |       }, 145 |       { 146 |          "id": "ES", 147 |          "name": "Spain", 148 |          "type": "country" 149 |       }, 150 |       { 151 |          "id": "IT", 152 |          "name": "Italy", 153 |          "type": "country" 154 |       }, 155 |       { 156 |          "id": "NA", 157 |          "name": "North America", 158 |          "type": "continent", 159 |          "children": [ 160 |             { 161 |                "_reference": "MX" 162 |             }, 163 |             { 164 |                "_reference": "CA" 165 |             }, 166 |             { 167 |                "_reference": "US" 168 |             } 169 |          ] 170 |       }, 171 |       { 172 |          "id": "MX", 173 |          "name": "Mexico", 174 |          "type": "country", 175 |          "population": "108 million", 176 |          "area": "1,972,550 sq km", 177 |          "children": [ 178 |             { 179 |                "_reference": "Mexico City" 180 |             }, 181 |             { 182 |                "_reference": "Guadalajara" 183 |             } 184 |          ] 185 |       }, 186 |       { 187 |          "id": "Mexico City", 188 |          "name": "Mexico City", 189 |          "type": "city", 190 |          "population": "19 million", 191 |          "timezone": "-6 UTC" 192 |       }, 193 |       { 194 |          "id": "Guadalajara", 195 |          "name": "Guadalajara", 196 |          "type": "city", 197 |          "population": "4 million", 198 |          "timezone": "-6 UTC" 199 |       }, 200 |       { 201 |          "id": "CA", 202 |          "name": "Canada", 203 |          "type": "country", 204 |          "population": "33 million", 205 |          "area": "9,984,670 sq km", 206 |          "children": [ 207 |             { 208 |                "_reference": "Ottawa" 209 |             }, 210 |             { 211 |                "_reference": "Toronto" 212 |             } 213 |          ] 214 |       }, 215 |       { 216 |          "id": "Ottawa", 217 |          "name": "Ottawa", 218 |          "type": "city", 219 |          "population": "0.9 million", 220 |          "timezone": "-5 UTC" 221 |       }, 222 |       { 223 |          "id": "Toronto", 224 |          "name": "Toronto", 225 |          "type": "city", 226 |          "population": "2.5 million", 227 |          "timezone": "-5 UTC" 228 |       }, 229 |       { 230 |          "id": "US", 231 |          "name": "United States of America", 232 |          "type": "country" 233 |       }, 234 |       { 235 |          "id": "SA", 236 |          "name": "South America", 237 |          "type": "continent", 238 |          "children": [ 239 |             { 240 |                "_reference": "BR" 241 |             }, 242 |             { 243 |                "_reference": "AR" 244 |             } 245 |          ] 246 |       }, 247 |       { 248 |          "id": "BR", 249 |          "name": "Brazil", 250 |          "type": "country", 251 |          "population": "186 million" 252 |       }, 253 |       { 254 |          "id": "AR", 255 |          "name": "Argentina", 256 |          "type": "country", 257 |          "population": "40 million" 258 |       } 259 | ] -------------------------------------------------------------------------------- /example-resources/dgrid-css/dgrid.css: -------------------------------------------------------------------------------- 1 | .dgrid { 2 | position: relative; 3 | overflow: hidden; 4 | border: 1px solid #ddd; 5 | height: 30em; 6 | display: block; 7 | } 8 | .dgrid-header { 9 | background-color: #eee; 10 | } 11 | .dgrid-header-row { 12 | position: absolute; 13 | right: 17px; 14 | left: 0; 15 | } 16 | .dgrid-header-scroll { 17 | position: absolute; 18 | top: 0; 19 | right: 0; 20 | } 21 | .dgrid-footer { 22 | position: absolute; 23 | bottom: 0; 24 | width: 100%; 25 | } 26 | .dgrid-header-hidden { 27 | font-size: 0; 28 | height: 0 !important; 29 | border-top: none !important; 30 | border-bottom: none !important; 31 | margin-top: 0 !important; 32 | margin-bottom: 0 !important; 33 | padding-top: 0 !important; 34 | padding-bottom: 0 !important; 35 | } 36 | .dgrid-footer-hidden { 37 | display: none; 38 | } 39 | .dgrid-sortable { 40 | cursor: pointer; 41 | } 42 | .dgrid-header, 43 | .dgrid-header-row, 44 | .dgrid-footer { 45 | overflow: hidden; 46 | background-color: #eee; 47 | } 48 | .dgrid-row-table { 49 | border-collapse: collapse; 50 | border: none; 51 | table-layout: fixed; 52 | empty-cells: show; 53 | width: 100%; 54 | height: 100%; 55 | } 56 | .dgrid-cell { 57 | padding: 3px; 58 | text-align: left; 59 | overflow: hidden; 60 | vertical-align: top; 61 | border: 1px solid #ddd; 62 | border-top-style: none; 63 | -webkit-box-sizing: border-box; 64 | -moz-box-sizing: border-box; 65 | box-sizing: border-box; 66 | } 67 | .dgrid-content { 68 | position: relative; 69 | height: 99%; 70 | } 71 | .dgrid-scroller { 72 | overflow-x: auto; 73 | overflow-y: scroll; 74 | position: absolute; 75 | top: 0px; 76 | margin-top: 25px; 77 | bottom: 0px; 78 | width: 100%; 79 | } 80 | .dgrid-preload { 81 | font-size: 0; 82 | line-height: 0; 83 | } 84 | .dgrid-loading { 85 | position: relative; 86 | height: 100%; 87 | } 88 | .dgrid-above { 89 | position: absolute; 90 | bottom: 0; 91 | } 92 | .ui-icon { 93 | width: 16px; 94 | height: 16px; 95 | background-image: url("images/ui-icons_222222_256x240.png"); 96 | } 97 | .dgrid-sort-arrow { 98 | background-position: -64px -16px; 99 | display: block; 100 | float: right; 101 | margin: 0 4px 0 5px; 102 | height: 12px; 103 | } 104 | .dgrid-sort-up .dgrid-sort-arrow { 105 | background-position: 0px -16px; 106 | } 107 | .dgrid-selected { 108 | background-color: #bbb; 109 | } 110 | .dgrid-input { 111 | width: 99%; 112 | } 113 | html.has-mozilla .dgrid .dgrid-row:focus, 114 | html.has-mozilla .dgrid .dgrid-cell:focus { 115 | outline: 1px dotted; 116 | } 117 | html.has-mozilla .dgrid-focus { 118 | outline-offset: -1px; 119 | } 120 | .dgrid-scrollbar-measure { 121 | width: 100px; 122 | height: 100px; 123 | overflow: scroll; 124 | position: absolute; 125 | top: -9999px; 126 | } 127 | .dgrid-autoheight { 128 | height: auto; 129 | } 130 | .dgrid-autoheight .dgrid-scroller { 131 | position: relative; 132 | overflow-y: hidden; 133 | } 134 | .dgrid-autoheight .dgrid-header-scroll { 135 | display: none; 136 | } 137 | .dgrid-autoheight .dgrid-header { 138 | right: 0; 139 | } 140 | .dgrid-column-set { 141 | overflow: hidden; 142 | width: 100%; 143 | position: relative; 144 | height: 100%; 145 | -ms-touch-action: pan-y; 146 | touch-action: pan-y; 147 | } 148 | .dgrid-column-set-cell { 149 | vertical-align: top; 150 | height: 100%; 151 | } 152 | .dgrid-column-set-scroller-container { 153 | font-size: 0; 154 | position: absolute; 155 | bottom: 0; 156 | } 157 | .dgrid-autoheight .dgrid-column-set-scroller-container { 158 | position: relative; 159 | } 160 | .dgrid-column-set-scroller { 161 | display: inline-block; 162 | overflow-x: auto; 163 | overflow-y: hidden; 164 | } 165 | .dgrid-column-set-scroller-content { 166 | height: 1px; 167 | } 168 | .ui-icon-triangle-1-e { 169 | background-position: -32px -16px; 170 | } 171 | .ui-icon-triangle-1-se { 172 | background-position: -48px -16px; 173 | } 174 | .dgrid-expando-icon { 175 | width: 16px; 176 | height: 16px; 177 | } 178 | .dgrid-tree-container { 179 | -webkit-transition-duration: 0.3s; 180 | -moz-transition-duration: 0.3s; 181 | -o-transition-duration: 0.3s; 182 | -ms-transition-duration: 0.3s; 183 | transition-duration: 0.3s; 184 | overflow: hidden; 185 | } 186 | .dgrid-tree-container.dgrid-tree-resetting { 187 | -webkit-transition-duration: 0; 188 | -moz-transition-duration: 0; 189 | -o-transition-duration: 0; 190 | -ms-transition-duration: 0; 191 | transition-duration: 0; 192 | } 193 | .dgrid-hider-toggle { 194 | background-position: 0 -192px; 195 | background-color: transparent; 196 | border: none; 197 | cursor: pointer; 198 | position: absolute; 199 | right: 0; 200 | top: 0; 201 | } 202 | .dgrid-rtl-swap .dgrid-hider-toggle { 203 | right: auto; 204 | left: 0; 205 | } 206 | .dgrid-hider-menu { 207 | position: absolute; 208 | top: 0; 209 | right: 17px; 210 | width: 184px; 211 | background-color: #fff; 212 | border: 1px solid #000; 213 | z-index: 99999; 214 | padding: 4px; 215 | overflow-x: hidden; 216 | overflow-y: auto; 217 | } 218 | .dgrid-rtl-swap .dgrid-hider-menu { 219 | right: auto; 220 | left: 17px; 221 | } 222 | .dgrid-hider-menu-row { 223 | position: relative; 224 | padding: 2px; 225 | } 226 | .dgrid-hider-menu-check { 227 | position: absolute; 228 | top: 2px; 229 | left: 2px; 230 | padding: 0; 231 | } 232 | .dgrid-hider-menu-label { 233 | display: block; 234 | padding-left: 20px; 235 | } 236 | .dgrid-header .dojoDndTarget .dgrid-cell { 237 | display: table-cell; 238 | } 239 | .dgrid-header .dojoDndItemBefore { 240 | border-left: 2px dotted #000 !important; 241 | } 242 | .dgrid-header .dojoDndItemAfter { 243 | border-right: 2px dotted #000 !important; 244 | } 245 | .dgrid-column-resizer { 246 | cursor: col-resize; 247 | position: absolute; 248 | width: 2px; 249 | background-color: #666; 250 | z-index: 1000; 251 | } 252 | .dgrid-resize-handle { 253 | height: 100px; 254 | width: 0; 255 | position: absolute; 256 | right: -4px; 257 | top: -4px; 258 | cursor: col-resize; 259 | z-index: 999; 260 | border-left: 5px solid transparent; 261 | outline: none; 262 | } 263 | .dgrid-resize-header-container { 264 | height: 100%; 265 | } 266 | .dgrid-resize-guard { 267 | cursor: col-resize; 268 | position: absolute; 269 | bottom: 0; 270 | left: 0; 271 | right: 0; 272 | top: 0; 273 | } 274 | html.has-touch .dgrid-resize-handle { 275 | border-left: 20px solid transparent; 276 | } 277 | html.has-touch .dgrid-column-resizer { 278 | width: 2px; 279 | } 280 | .dgrid-resize-header-container { 281 | position: relative; 282 | } 283 | .dgrid-header .dgrid-cell { 284 | overflow: hidden; 285 | } 286 | .dgrid-spacer-row { 287 | height: 0; 288 | } 289 | .dgrid-spacer-row th { 290 | padding-top: 0; 291 | padding-bottom: 0; 292 | border-top: none; 293 | border-bottom: none; 294 | } 295 | .dgrid-status { 296 | padding: 2px; 297 | } 298 | .dgrid-pagination .dgrid-status { 299 | float: left; 300 | } 301 | .dgrid-pagination .dgrid-navigation, 302 | .dgrid-pagination .dgrid-page-size { 303 | float: right; 304 | } 305 | .dgrid-navigation .dgrid-page-link { 306 | cursor: pointer; 307 | font-weight: bold; 308 | text-decoration: none; 309 | color: inherit; 310 | padding: 0 4px; 311 | } 312 | .dgrid-first, 313 | .dgrid-last, 314 | .dgrid-next, 315 | .dgrid-previous { 316 | font-size: 130%; 317 | } 318 | .dgrid-pagination .dgrid-page-disabled { 319 | color: #aaa; 320 | cursor: default; 321 | } 322 | .dgrid-page-input { 323 | margin-top: 1px; 324 | width: 2em; 325 | text-align: center; 326 | } 327 | .dgrid-page-size { 328 | margin: 1px 4px 0 4px; 329 | } 330 | .dgrid-rtl-swap .dgrid-header-row { 331 | right: 0; 332 | left: 17px; 333 | } 334 | .dgrid-rtl-swap .dgrid-header-scroll { 335 | left: 0px; 336 | right: auto; 337 | } 338 | .dgrid-rtl .dgrid-cell { 339 | text-align: right; 340 | } 341 | .dgrid-rtl .dgrid-sort-arrow { 342 | float: left; 343 | margin: 0 5px 0 4px; 344 | } 345 | .dgrid-rtl .ui-icon-triangle-1-e { 346 | background-position: -96px -16px; 347 | } 348 | .dgrid-rtl .ui-icon-triangle-1-se { 349 | background-position: -80px -16px; 350 | } 351 | .dgrid-rtl .dgrid-pagination .dgrid-status { 352 | float: right; 353 | } 354 | .dgrid-rtl .dgrid-pagination .dgrid-page-size { 355 | float: right; 356 | } 357 | .dgrid-rtl .dgrid-pagination .dgrid-navigation { 358 | float: left; 359 | } 360 | .dgrid-rtl.dgrid-autoheight .dgrid-header { 361 | left: 0; 362 | } 363 | --------------------------------------------------------------------------------