amd in dojo and beyond n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
AMD in Dojo and beyond PowerPoint Presentation
Download Presentation
AMD in Dojo and beyond

Loading in 2 Seconds...

play fullscreen
1 / 50

AMD in Dojo and beyond - PowerPoint PPT Presentation


  • 207 Views
  • Uploaded on

AMD in Dojo and beyond. By Karthick S. Agenda. Dojo fundamentals Introduction to AMD AMD Benefits AMD Development Strategies - Module vs Widget Use Case Using Dijit Widgets Creation of custom widgets Grids and Stores. JavaScript Pre-requisites. Objects Prototypal Inheritance

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'AMD in Dojo and beyond' - thimba


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
agenda
Agenda
  • Dojofundamentals
  • Introduction to AMD
  • AMD Benefits
  • AMD Development Strategies - Module vs Widget
  • Use Case
  • Using Dijit Widgets
  • Creation of custom widgets
  • Grids and Stores
javascript pre requisites
JavaScript Pre-requisites
  • Objects
  • Prototypal Inheritance
  • Closures
  • Callbacks
  • Anonymous functions
  • Prototypes
  • Variable Hoisting
  • Bind, Call and Apply
why dojo
Why Dojo ?
  • Support for industry standard AMD across the toolkit
  • Field proven performance of Enterprise Web Apps
  • Comprehensive Dijit library
  • Flexible to write custom widgets
  • Backing of enterprise bigwigs like IBM, AOL, and Sun
  • Early adopters of Deferreds and Promises, Aspects, Client-side pubsub, Offline storage etc
  • Lots of community packages like grid, xstyle, etc
what is amd
What is AMD ?
  • Stands for Asynchronous Module Definition
  • Born out of CommonJS and inspired by Dojo XHR+eval
  • Load ONLY the needed modules asynchronously
  • Also can load non-AMD plugins like HTML, JSON, etc
  • Supported from Dojo v1.7 onwards
  • https://github.com/amdjs/amdjs-api/wiki/AMD
benefits of amd
Benefits of AMD
  • Say goodbye to globals - AMD provides better encapsulation
  • Can load and manage 3rd party packages
  • Loads the modules only once and caches them
  • Better reusability and maintainability
  • Baseless Dojo
  • Supports cross domain loading of JS modules
  • Better minification and portability
amd apis
AMD APIs
  • require
  • define
amd code structure
AMD Code Structure
  • dojoLib/dojo
  • dojoLib/dijit
  • dojoLib/dojox
  • dojoLib/dgrid
  • dojoLib/<your-custom-package>/<your-custom-modules>
  • e.g.: dojoLib/myApp/myModuleOne
  • Dojo Library -> Package -> Module/Widget
amd code structure contd
AMD Code Structure - Contd
  • Dojo comes organized into packages.
  • Packages are collections of modules.
  • Modules are nothing but individual JS files with define API
  • Modules have 1:1 mapping with the JS files
dojo code sample before and after amd
Dojo Code Sample – Before and After AMD

dojo.ready(function(){

varmyButton = dojo.byId("myButton”);

Before AMD - >

dojo.connect(myButton, "onclick", function(evt){

dojo.style(myDiv, "backgroundColor", "blue");

});

});

require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/domReady!"],

function(on, dom, domStyle, mouse) {

var myButton = dom.byId("myButton”);

After AMD - >

on(myButton, "click", function(evt){

domStyle.set(myDiv, "backgroundColor", "blue");

});

});

amd constructs and concepts
AMD Constructs and Concepts
  • In the Dojo 1.6 and before, dojo.js is loaded with base API like ready, connect, style, etc.
  • AMD uses “base-less” dojo, i.e. none of the APIs are loaded by default.
  • Load them whenever we need to use them using require
  • Wrap the JavaScript code into modules using define
  • Create custom widgets using define, declare and new
using modules
Using Modules
  • Using require() API.
  • Syntax

require(<module-identifiers-array>, <anonymous-callback-function>);

Argument 1 - Dependencies

Argument 2 - Callback Function

  • Example

require([“myPkg/myModule”,

“dojo/dom”,

”dojo/domReady!],

function(myModule,dom){

myModule.initApp();

dom.byId(“testDiv”).innerHTML=“AMD is the way to go!”;

});

using modules contd
Using Modules – contd.

Module Identifier

  • Mappings to the path of the individual JS file(.js).
  • We can specify relative paths as well(like ./)
  • We need to specify all the dependencies here

Callback Function

  • An anonymous function which will be called back, after loading the dependencies specified in the moduleID array.
  • Arguments are the returned objects of the loaded modules
  • The moduleIDs and the argsList should be in the same order
  • Special plugins like domReady! don’t return any object
popular apis
Popular APIs
  • dojo/on - Event handling
  • dojo/dom - DOM manipulations
  • dojo/query - Advanced CSS Selectors
  • dojo/topic - Event publish/subscribe
  • dojo/aspect - Aspect oriented programming (AOP)
  • dijit/registry - Widgetmanipulations
  • dojo/_base/fx - Base effects
  • dojo/_base/array - Array manipulations
dojo plugins
DojoPlugins
  • Extend the AMD Loader to provide special functionalities
  • They do not return any object when included in require
  • All the plugin module identifiers will end or have exclamation point (!)
  • Exclamation point is used to indicate process , to the loader
  • Popular plugins are
    • “dojo/text!”
    • “dojo/domReady!”
    • “dojo/il8n!”
dojo plugins1
DojoPlugins
  • Extend the AMD Loader to provide special functionalities
  • They do not return any object when included in require
  • All the plugin module identifiers will end or have exclamation point (!)
  • Exclamation point is used to indicate process , to the loader
  • Popular plugins are
    • “dojo/text!”
    • “dojo/domReady!”
    • “dojo/il8n!”
example dojo text
Example: dojo/text
  • Loads the content of the file into a string object
  • Replaces dojo.cache
  • Used to load the template HTML in widgets

require([“dojo/text!./names.txt”,

“dojo/domReady!”],

function(names){

var names = names.split(“\n”);

console.log(“Names loaded=“, names.length);

});

defining modules
Defining Modules
  • Use the define() API
  • Code is resolved only when needed.
  • Syntax

define(<module-identifiers-array>, <anonymous-callback-function>);

Argument 1 - Dependencies for the module

Argument 2 - Factory Function - returns an object/value

  • Example

File should -> ”<baseURL>/myPkg/myModule.js”

define([“dojo/dom”],

function(dom){

return {

moduleName: “Test Module”,

initApp: function(){

dom.byId(‘testDiv’).innerHTML = “Success”;

}

};

});

dojo 1 6 and before using datagrid
Dojo 1.6 and before - Using DataGrid

dojo.require("dojox.grid.DataGrid");

dojo.require("dojo.data.ItemFileWriteStore");

var grid, store;

dojo.ready(function(){

store = new dojo.data.ItemFileWriteStore({url: “employees.json”});

grid = new dojox.grid.DataGrid({

store: store,

query: { id: "*" },

structure: [

{ name: "First Name", field: "first", width: "84px" },

{ name: "Last Name", field: "last", width: "84px" },

{ name: “Company”, field: “company”, width: "70px" },

{ name: “Department”, field: “dept”, width: "70px" },

{ name: “Salary”, field: “salary”, width: "60px" }

}, "grid"); grid.startup();

});

dojo 1 7 and after using datagrid
Dojo 1.7 and after - Using DataGrid

var grid, dataStore, store;

require(["dojox/grid/DataGrid”, "dojo/store/Memory“, "dojo/data/ObjectStore”, "dojo/_base/xhr”, "dojo/domReady!"

], function(DataGrid, Memory, ObjectStore,xhr){

xhr.get({

url: "employees.json",

handleAs: "json"

}).then(function(data){

store = new Memory({ data: data.items });

dataStore = new ObjectStore({ objectStore: store }); grid = new DataGrid({

store: dataStore,

query: { id: "*" },

structure: [

{ name: "First Name", field: "first", width: "84px" },

{ name: "Last Name", field: "last", width: "84px" },

{ name: “Company”, field: “company”, width: "70px" },{ name: “Department”, field: “dept”, width: "70px" }, ]

}, "grid"); grid.startup();

});

});

widget creation
Widget Creation
  • declare
  • Syntax

Arg1 - Class/Widget name - Optional

Arg2 - Subclass array - Subclasses are called Mixins in Dojo

Arg3 - Class Object

  • Example
  • Without AMD

dojo.provide(“myPkg.myWidget”);

dojo.require(“dijit._WidgetBase”);

dojo.require(“dijit._TemplatedMixin”);

dojo.declare(“myPkg.myWidget”,

[dijit._WidgetBase, dijit._TemplatedMixin], {

templateString: dojo.cache(“myPkg”, “templates/myWidget.html”);

});

widget creation with amd
Widget Creation - With AMD

define([

"dojo/_base/declare",

"dijit/_WidgetBase",

"dijit/_TemplatedMixin",

"dojo/text!./templates/myWidget.html"

], function(declare, _WidgetBase, _TemplatedMixin, template) {

return declare([_WidgetBase, _TemplatedMixin], {

templateString: template

});

});

widget lifecycle
WidgetLifecycle
  • All dojo widgets extend the base class, diiit_WidgetBase
  • Optionally extend dijit_templatedMixin if we need template or layout for the widget
  • All widgets have a set of lifecycle methods to them
  • These lifecycle methods are your access to write custom logic
  • this.inherited(arguments); - To call the superclass overridden method
widget lifecycle methods
WidgetLifecycleMethods
  • constructor - Initialization code.
  • parameters are mixed into the widget instance
  • postMixInProperties- Before DOM rendering and creation of DOM nodes. Add or change the instance properties.
  • buildRendering-dijit._Templated takes care.The template is fetched/read, nodes created and events hooked up during buildRendering. The end result is assigned to this.domNode.
  • Setters are called
  • postCreate-Widget has been rendered on the DOM, except for its child widgets. Sizing operations should be done here.
  • Startup - Called after parsing and creation of child widgets has completed. If the widget does JS sizing, then startup() should call resize(), which does the sizing.
  • destroy
the dijit collection
The DijitCollection
  • Context, popup, and dropdown menus
  • Form element replacements like buttons, combo boxes, checkboxes, radio buttons, and text boxes
  • Date and time selection widgets
  • WYSIWYG Editor
  • Horizontal and Vertical Sliders
  • Progress Bars
  • Tabs and Accordions
  • Tree Structures (including Drag and Drop)
  • Dialogs and Tooltips
  • Layout widgets with slide controls and splitters
requiring proper modules and resources
Requiring Proper Modules and Resources
  • It comes bundled with four supported themes:
  • -> nihilo, soria, tundra, and claro
  •  Each theme contains images and CSS files CSS files must be explicitly included into each HTML page:

<style type="text/css">

 @import “//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css";

@import //ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css";

</style>

  • <body class="claro">
dojoconfig
dojoConfig
  • dojoConfig
  • dojoConfig = {

isDebug:true,

async:true

}

  • Note: parseOnLoad was a common property in djConfig, but this is no longer recommended. See information about the parser below.

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"

    data-dojo-config="isDebug:true, async:true" type="text/javascript"></script>

  • <body class="claro">
  •     <button data-dojo-type='dijit/form/Button'>Clicky</button>
  • </body>
dojo parser
dojo/parser
  • We need to load dojo/parser and explicitly tell it to parse. 
  • After the DOM is ready of course. The AMD way to determine this is with the dojo/domReady plugin. AMD is instructed that the loaded dependency is a plugin with an exclamation point, such as: dojo/domReady!.

<body class="claro">

    <button data-dojo-type='dijit/form/Button'>Clicky</button>

    <script>

        require([

            'dojo/parser',

“dijit/form/Button”,

            'dojo/domReady!'

        ], function(parser){

parser.parse(); // tell dojo to check the DOM for widgets

        });

    </script>

</body>

require dijit widgets
Require Dijit widgets
  • AMD Loader is asynchronous and smart enough to find and load un-required modules.
  • But Widget should be required explicitly, to get maximum performance from your application,
  • AMD and Dojo require that you explicitly define the modules and dependencies you want to use in your application. 
creating widgets
Creating Widgets
  • The Basic select Element

<select name="character" id="character">

    <option value="">Select a character</option>

    <option value="Leonard">Dr. Leonard Leakey Hofstadter</option>

    <option value="Sheldon" selected="selected">Dr. Sheldon Lee Cooper</option>

    <option value="Rajesh">Dr. Rajesh RamayanKoothrappali</option>

    <option value="Howard">Howard Joel Wolowitz</option>

</select>

  • dijit/form/FilteringSelect
creating widgets1
Creating Widgets
  • Declarative way

<select name="character" id="characterNode"

data-dojo-type="dijit/form/FilteringSelect"

data-dojo-props='autoComplete:true, pageSize:10' >

    <option value="">Select a character</option>

    <option value="Leonard">Dr. Leonard Leakey Hofstadter</option>

    <option value="Sheldon" selected="selected">Dr. Sheldon Lee Cooper</option>

    <option value="Rajesh">Dr. Rajesh RamayanKoothrappali</option>

    <option value="Howard">Howard Joel Wolowitz</option>

</select>

  •  When we call parser.parse(), Dojo will find this element and instantiate and initialize the widget.
creating widgets2
Creating Widgets
  • Programmatic Method

 require([

    'dijit/form/FilteringSelect',

    'dojo/domReady!'

], function(FilteringSelect){

varfilteringSelect = new FilteringSelect({

autoComplete: true,

pageSize: 10

    },'characterNode');

});

  •   dojo/parser was removed from the list of dependencies, as it’s not needed for programmatic instantiation of widgets.
creating more widgets
Creating More Widgets

require([

    'dijit/form/FilteringSelect',

    'dijit/form/DateTextBox',

 'dijit/form/Textbox',

    'dijit/form/Textarea',

    'dijit/form/Checkbox',

    'dijit/form/RadioButton',

    'dojo/domReady!'

], function(FilteringSelect, DateTextBox, Textbox, Textarea, Checkbox, RadioButton){

varfilteringSelect = new FilteringSelect({

autoComplete: true,

pageSize: 10

    },'characterNode');

var input = new Textbox({/*options*/},'myInputNode');

vartextarea = new Textarea({/*options*/},'myTextareaNode');

varmySelect = new FilteringSelect({/*options*/},'mySelectNode');

var date = new DateTextBox({/*options*/},'myDateNode');

var checkbox = new CheckBox({/*options*/},'myCheckboxNode');

var radio1 = new RadioButton({/*options*/},'myRadio1Node');});

accessing dijit widgets and their properties
Accessing Dijit Widgets and their Properties
  • Dijit has its own dijit/registry.byId method which retrieves the Dijit widget registered with the ID specified.
  • If the element to be made a Dijit has an ID, the widget ID will be that same value. If the source element doesn’t have an ID attribute, a widget ID will be generated. 
  • require([

    'dojo/parser',

 'dijit/registry',

    'dijit/form/FilteringSelect',

    'dojo/domReady!'

], function(parser, registry, FilteringSelect){

parser.parse();

varfilteringSelect = registry.byId('characterNode');

    console.log('filteringSelect', filteringSelect);

});

getter and setters
Getter and setters
  • If we wanted to access the pageSize property for which the Dijit widget was created from, we would access it with a Dijit getter:

varpageSize = registry.byId('characterNode').get('pageSize'); // returns 10

  • If we wanted to change the pageSize for the widget, we would code:

registry.byId('characterNode').set('pageSize',20); //now pageSize is 20

listening to widget events
Listening to Widget Events
  • Dijit widgets use dojo/on method to listen to DOM events on the given widget:
  • filteringSelect.on('change', function(value){
  •     console.log('value', value);
  • });
  • It’s important to note that those are DOM events. If you wish to listen to a widget method, you should use dojo/aspect:

require([

    'dojo/aspect'

    // other deps...

], function(aspect){

aspect.after(filteringSelect, 'validate', function(value){

        console.log('validate', value);

    });

});

dojo object stores
Dojo Object Stores
  • new data store API called Dojo Object Store.
  • This new store API is based on the HTML5 IndexedDB object store API
  • simplify and ease the interaction and construction of Dojo stores.
  • This new API follows HTTP/REST naming conventions 
  •  is compatible with the dojox.storage providers (for local storage, cookie storage, and WebSQL storage),
  • Separate UI from data concerns
  • Dojo Object Store API is an interface between different data consumers to different data producers.
  • Dojo core comes with two key implementations that are commonly needed: 
    • dojo/store/Memoryand
    • dojo/store/JsonRest.
dojo store memory
dojo/store/Memory
  • This is a very simple in-memory store.
  • This is highly useful for quickly creating a store, particularly for smaller datasets.
  • A Memory store can be created by simply providing a plain array of objects as the data source for this store, and then you can start querying and interacting with the store
  • The Memory store is a synchronous store, which means it directly returns values, making it very easy to use.
  • var product = productStore.get("slinky");

varsomeData= [ {id:1, name:"One"}, {id:2, name:"Two"} ];

store =newdojo.store.Memory({data:someData});

store.get(1)

store.query({name:"One"})

store.query(function(object){ return object.id >1; })

store.put({id:3, name:"Three"});

store.remove(3);

dojo store jsonrest
dojo/store/JsonRest
  • dojo/store/JsonRest is a lightweight object store implementation of an HTTP-based (RFC 2616) client with RESTful data interaction capabilities.
  • This store implements the new Dojo Object Store API.
  • JsonRest provides full read, write, and notification capabilities through standards based HTTP/REST interaction with the server using GET, PUT, POST, and DELETE commands.
  • This data store allows you to communicate with server side database/persistent data storage using the Dojo Data API with JavaScript and efficiently handles create, read, update, and delete (CRUD) operations
  • require(["dojo/store/JsonRest"], function(JsonRestStore){

var store = new JsonRestStore({target: "/Table/" });

store.get(3).then(function(object){});

store.query("foo=bar").then(function(results){});

store.put({ foo: "bar" }, { id: 3 }); // store the object with the given identity

store.remove(3); // delete the object

});

object store api methods
Object Store API Methods
  • get(id) - This will trigger a GET request to {target}{id}.
  • query(query, options) - This will trigger a GET request to {target}{query}. If query is an object, it will be serialized using dojo.objectToQuery. If query is a string, it is appended to the URL as-is. If options includes a sort property, it will be serialized as a query parameter as well; see Sortingfor more information.
  • remove(id) - This will trigger a DELETE request to {target}{id}.
  • put(object, options) - If object includes an identity property, or options includes an id, this will trigger a PUT request to {target}{id} with the request body being the provided object serialized as JSON. If no identity is provided, then a POST request is made to the store’s target URL (no id appended) with the object as the body. If the options.incremental property is true, then a POST request is made to {target}{id} with the object as the body. You may also include an options.overwrite property. If overwrite is set to true, then an If-Match: * header is included. If overwrite is set to false, then an If-None-Match: * header is included.
  • add(object, options) - This behaves exactly like put(object, options), except that options.overwrite is set to false, indicating that a new object must be created.
dojo store observable
dojo.store.Observable
  • dojo.store.Observable is an object store wrapper that adds support for notification of data changes to query result sets.
  • The query result sets returned from a Observable store will include a observe function that can be used to monitor for changes. 
  • The observe function provides indication of the previous and new index values of changed objects to properly update result arrays.
  • The result sets returned from store.query() calls from a Observable store will have a observe method. The observe method has the following signature: resultSet.observe(listener);
  • The listener function is called with following arguments: listener(object, removedFrom, insertedInto);

store = dojo.store.Observable(new dojo.store.Memory({data: someData}));

varresults = store.query({rating:5});

// do something with the initial result set

results.forEach(insertRow);

varobserveHandle = results.observe(function(object, removedFrom, insertedInto){

if(removedFrom > -1){ // existing object removed

removeRow(removedFrom);

}});

store.put({rating: 5, id: 3});

store.remove(2);

observeHandle.cancel();

dojo store cache
dojo.store.Cache
  • dojo.store.Cache is a object store wrapper for caching data from one store in another store. This store follows the Dojo Object Store API.
  • The Cache store provides caching capabilities for stores. The Cache store takes two stores, a master store and caching store.
  • The master store is considered the data authority, all modifications go to the master store, and when data is not available in the cache, it is retrieved from the master store.
  • The caching store is used to record cached data from master store. Doing get() and query() call results are added to the cache (unless they don’t meet provided criteria), but only get() uses the cache, whereas query() uses the master store.
  • If you want to a query to come from the cache, directly call query() on the caching store. Data modifications are also mirrored in the caching store. A typical usage of dojo.store.Cache would be to use a JsonRest store as the master store, and a Memory store as the caching store.

restStore = newdojo.store.JsonRest(...);

memoryStore= newdojo.store.Memory();

store = newdojo.store.Cache(restStore, memoryStore);

store.get(1) -> Returns the object with an id of 1 by making a GET request

store.get(1) -> Returns the object, using the local memory cache

store.put({id:2, name:"two"}) -> Stores the object in both master and cache store

store.get(2) -> Returns the object, using the local memory cache

introduction to the datagrid
Introduction to the DataGrid
  • The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to define a grid's layout and discuss the scrolling mechanism the DataGrid uses.
  • dojox/grid/DataGrid
  • As you probably guessed, the DataGrid is made up of several different parts.
  • At the highest level, a DataGrid is made up of views.
  • Views break the DataGrid up into sections and render the headerandcontent for each section.
  • Headers and contents contain rows (although the header only contains one row) which are populated by sub-rows of cells. 
  •  To define how a DataGrid will look, we will be passing different objects and arrays to the structure property of the DataGrid constructor. 
  • Cell Definition object
    • name: the string to use in the header cell
    • field: the name of the field of the data record to display
    • width: a string containing the CSS width (with units) of the column
    • hidden: a boolean that when true will hide the column
introduction to the datagrid1
Introduction to the DataGrid
  • The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to define a grid's layout and discuss the scrolling mechanism the DataGrid uses.
  • dojox/grid/DataGrid
  • As you probably guessed, the DataGrid is made up of several different parts.
  • At the highest level, a DataGrid is made up of views.
  • Views break the DataGrid up into sections and render the headerandcontent for each section.
  • Headers and contents contain rows (although the header only contains one row) which are populated by sub-rows of cells. 
  •  To define how a DataGrid will look, we will be passing different objects and arrays to the structure property of the DataGrid constructor. 
  • Cell Definition object
    • name: the string to use in the header cell
    • field: the name of the field of the data record to display
    • width: a string containing the CSS width (with units) of the column
    • hidden: a boolean that when true will hide the column
datagrid subrow
DataGridSubRow

grid = new DataGrid({

    store: store,

    query: { id: "*" },

    structure: [

        [

            { name: "First Name", field: "first", width: "84px", rowSpan: 2 },

            { name: "Last Name", field: "last", width: "84px", rowSpan: 2 },

            { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },

            { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },

            { name: "G", field: "totalG", width: "60px" },

            { name: "AB", field: "totalAB", width: "60px" },

            { name: "R", field: "totalR", width: "60px" },

            { name: "RBI", field: "totalRBI", width: "60px" },

            { name: "BB", field: "totalBB", width: "60px" },

            { name: "K", field: "totalK", width: "60px" }

        ],[

            { name: "Games as Batter", field: "totalGAB", colSpan: 2 },

            { name: "H", field: "totalH" },

            { name: "2B", field: "total2B" },

            { name: "3B", field: "total3B" },

            { name: "HR", field: "totalHR" }

        ]

    ]

}, "grid");

datagrid views
DataGrid Views
  • We've made it a little easier to view our data, however once you scroll to the right you can't see whose records you're looking at. By defining a view definition, we can lock sections of columns from scrolling left and right. A view definition is an object with some specific properties set on it:
  • cells: an array or an array of arrays of cell definitions
  • noscroll: a boolean that when true will prevent the view from scrolling horizontally
  • width: a string specifying the CSS width of the view — this is only needed when your cells are defined with relative widths like percentages
datagrid views1
DataGrid Views

grid = new DataGrid({

    store: store,

    query: { id: "*" },

    structure: [

        {

noscroll: true,

            cells: [

                { name: "First Name", field: "first", width: "84px" },

                { name: "Last Name", field: "last", width: "84px" }

            ]

        },{

            cells: [

                [

                    { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },

                    { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },

                    { name: "G", field: "totalG", width: "60px" },

                    { name: "AB", field: "totalAB", width: "60px" },

                    { name: "R", field: "totalR", width: "60px" },

                    { name: "RBI", field: "totalRBI", width: "60px" },

                    { name: "BB", field: "totalBB", width: "60px" },

                    { name: "K", field: "totalK", width: "60px" }

                ],[

                    { name: "Games as Batter", field: "totalGAB", colSpan: 2 },

                    { name: "H", field: "totalH" },

                    { name: "2B", field: "total2B" },

                    { name: "3B", field: "total3B" },

                    { name: "HR", field: "totalHR" }

                ]

            ]

        }

    ]

}, "grid");

populating your grid using dojo data views
Populating your Grid using dojo/dataViews

The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to populate a grid and manipulate data in a grid.

  • There are two ways to access the data in the store; the first is letting the DataGrid query the store for you. To do this, we can pass three parameters to the DataGrid constructor:
  • store: The data store.
  • query: The query to pass to the store. The syntax will depend on the store being used.
  • queryOptions: Options to pass to the store during querying. The options will depend on the store being used, and is not required.
  • Since we want every record, we'll pass { id: "*" }:
  • require([
  •     "dojox/grid/DataGrid",
  •     "dojo/store/Memory",
  •     "dojo/data/ObjectStore",
  •     "dojo/_base/xhr",
  •     "dojo/domReady!"
  • ], function(DataGrid, Memory, ObjectStore, xhr){
  • var grid,  dataStore;
  • xhr.get({
  •         url: "hof-batting.json",
  • handleAs: "json"
  •     }).then(function(data){
  • dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });
  •         grid = new DataGrid({
  •             store: dataStore,
  •             query: { id: "*" },
  • queryOptions: {},
  •             structure: [
  •                 { name: "First Name", field: "first", width: "25%" },
  •                 { name: "Last Name", field: "last", width: "25%" },
  •                 { name: "G", field: "totalG", width: "10%" },
  •                 { name: "AB", field: "totalAB", width: "10%" },
  •                 { name: "R", field: "totalR", width: "10%" },
  •                 { name: "H", field: "totalH", width: "10%" },
  •                 { name: "RBI", field: "totalRBI", width: "10%" }
  •             ]
  •         }, "grid");
  • grid.startup();
  •     });
  • });
populating your grid using dojo data views1
Populating your Grid using dojo/dataViews

require([

    "dojox/grid/DataGrid",

    "dojo/store/Memory",

    "dojo/data/ObjectStore",

    "dojo/_base/xhr",

    "dojo/domReady!"

], function(DataGrid, Memory, ObjectStore, xhr){

var grid,  dataStore;

xhr.get({

        url: "hof-batting.json",

handleAs: "json"

    }).then(function(data){

dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });

        grid = new DataGrid({

            store: dataStore,

            query: { id: "*" },

queryOptions: {},

            structure: [

                { name: "First Name", field: "first", width: "25%" },

                { name: "Last Name", field: "last", width: "25%" },

                { name: "G", field: "totalG", width: "10%" },

                { name: "AB", field: "totalAB", width: "10%" },

                { name: "R", field: "totalR", width: "10%" },

                { name: "H", field: "totalH", width: "10%" },

                { name: "RBI", field: "totalRBI", width: "10%" }

            ]

        }, "grid");

grid.startup();

    });

});

populating your grid using dojo data views2
Populating your Grid using dojo/dataViews
  • Formatting Data

{

    name: "G", field: "totalG", width: "10%",

    formatter: function(games){

        return games + " <em>games</em>";

    }

},

  • DataGrid as a View
  • One very important point should be made before concluding this tutorial: the DataGrid is simply aview of a dojo/data store.
  • This means the DataGrid will react to changes in the store (row addition or deletion, and record field updates) if the store supports the notification API of dojo/data, and it will sort the data according to the rules of the store you're using. However, it is not designed to do sorting apart from the store.
  • This means that if formatting your data will change the sort order, theDataGrid won't notice the formatted changes.