gridx

client-data.html

<script type="text/javascript">
	require([
		"gridx/Grid",
		"gridx/core/model/cache/Sync",
		"gridx/modules/VirtualVScroller",
		"gridx/modules/ColumnResizer",
		"gridx/modules/extendedSelect/Row",
		"gridx/modules/SingleSort",
		"dojo/store/Memory"
	], function(){
		//Create store here.
		//store = ...
	});
</script>
......
<div data-dojo-type="gridx/Grid"
	data-dojo-props="
		store: store,
		cacheClass: 'gridx/core/model/cache/Sync',
		structure: [
			{ id: 'column_1', field: 'name', name: 'Name', width: '50%' },
			{ id: 'column_2', field: 'genre', name: 'Genre', width: 'auto' },
			{ id: 'column_3', field: 'composer', name: 'Composer', width: 'auto' },
			{ id: 'column_4', field: 'year', name: 'Year', width: 'auto' }
		],
		selectRowTriggerOnCell: true,
		modules: [
			'gridx/modules/VirtualVScroller',
			'gridx/modules/ColumnResizer',
			'gridx/modules/extendedSelect/Row',
			'gridx/modules/SingleSort',
		]
"></div>

client-data.js

require([
	"gridx/Grid",
	"gridx/core/model/cache/Sync",
	"gridx/modules/VirtualVScroller",
	"gridx/modules/ColumnResizer",
	"gridx/modules/extendedSelect/Row",
	"gridx/modules/SingleSort",
	"dojo/store/Memory",
	"dojo/domReady!"
], function(Grid, Cache, 
	VirtualVScroller, ColumnResizer, SelectRow, 
	SingleSort, Store){

	//Create store here...
	//var store = new Store(...);

	var grid = new Grid({
		store: store,
		cacheClass: Cache,
		structure: [
			{ id: "column_1", field: "name", name: "Name", width: "50%" },
			{ id: "column_2", field: "genre", name: "Genre" },
			{ id: "column_3", field: "composer", name: "Composer" },
			{ id: "column_4", field: "year", name: "Year" }
		],
		selectRowTriggerOnCell: true,
		modules: [
			VirtualVScroller,
			ColumnResizer,
			SelectRow,
			SingleSort,
		]
	});

	grid.placeAt("gridContainer");
	grid.startup();
});

grid1.html

<style type="text/css">
/*Use claro theme.*/
    @import "http://localhost/cdn/dojo-release-1.9.1/dijit/themes/claro/claro.css";
    @import "http://localhost/cdn/dojo-release-1.9.1/dijit/themes/claro/document.css";

    /*Import the main CSS file of Gridx.*/
    @import "http://localhost/cdn/dojo-release-1.9.1/gridx/resources/claro/Gridx.css";

    /*import RTL css if you need to support rtl.*/
    @import "http://localhost/cdn/dojo-release-1.9.1/gridx/resources/claro/Gridx_rtl.css";
    .gridx {
    width: 400px;
    height: 200px;
    
</style>
<script type="text/javascript">
    require([
             'dojo/store/Memory',
             'gridx/Grid',
             'gridx/core/model/cache/Sync'
         ], function(Memory, Grid, Cache){

    	var store = new Memory({
    	    data: [
    	        { id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5'},
    	        { id: 2, name: 'Alice', score: 123, city: 'Washington', birthday: '1984/3/7'},
    	        { id: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '1986/10/8'},
    	        { id: 4, name: 'Mike', score: 100, city: 'London', birthday: '1988/8/12'},
    	        { id: 5, name: 'Tom', score: 89, city: 'San Francisco', birthday: '1990/1/21'}
    	    ]
    	});
    	var structure = [
    	    { id: 'name', field: 'name', name: 'Name', width: '50px'},
    	    { id: 'city', field: 'city', name: 'City'},
    	    { id: 'score', field: 'score', name: 'Score', width: '80px'}
    	];
    	var cacheClass = Cache; //Use Cache directly
    	//Create grid widget.
    	    var grid = Grid({
    	        id: 'grid',
    	        cacheClass: Cache,
    	        store: store,
    	        structure: structure
    	    });

    	    //Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
    	    grid.placeAt('gridNode');

    	    //Start it up.
    	    grid.startup();
    	});
</script>

server-data.html

<script type="text/javascript">
	require([
		"gridx/Grid",
		"gridx/core/model/cache/Async",
		"gridx/modules/VirtualVScroller",
		"gridx/modules/ColumnResizer",
		"gridx/modules/extendedSelect/Row",
		"gridx/modules/SingleSort",
		"dojo/store/JsonRest"
	], function(){
		//Create store here.
		//store = ...
	});
</script>
......
<div data-dojo-type="gridx/Grid"
	data-dojo-props="
		store: store,
		cacheClass: 'gridx/core/model/cache/Async',
		structure: [
			{ id: 'column_1', field: 'name', name: 'Name', width: '50%' },
			{ id: 'column_2', field: 'genre', name: 'Genre', width: 'auto' },
			{ id: 'column_3', field: 'composer', name: 'Composer', width: 'auto' },
			{ id: 'column_4', field: 'year', name: 'Year', width: 'auto' }
		],
		selectRowTriggerOnCell: true,
		modules: [
			'gridx/modules/VirtualVScroller',
			'gridx/modules/ColumnResizer',
			'gridx/modules/extendedSelect/Row',
			'gridx/modules/SingleSort',
		]
"></div>

server-data.js

require([
	"gridx/Grid",
	"gridx/core/model/cache/Async",
	"gridx/modules/VirtualVScroller",
	"gridx/modules/ColumnResizer",
	"gridx/modules/extendedSelect/Row",
	"gridx/modules/SingleSort",
	"dojo/store/JsonRest",
	"dojo/domReady!",
	"dojo/data/ObjectStore"
], function(Grid, Cache, 
	VirtualVScroller, ColumnResizer, SelectRow, 
	SingleSort, Store){

	//Create store here...
	//var store = new Store({target:"${resource(dir:'employee')}/listJson"});

	var grid = new Grid({
		store: dojo.data.ObjectStore({objectStore: store}),
		cacheClass: Cache,
		structure: [
			{ id: "column_1", field: "name", name: "Name", width: "50%" },
			{ id: "column_2", field: "genre", name: "Genre" },
			{ id: "column_3", field: "composer", name: "Composer" },
			{ id: "column_4", field: "year", name: "Year" }
		],
		selectRowTriggerOnCell: true,
		modules: [
			VirtualVScroller,
			ColumnResizer,
			SelectRow,
			SingleSort,
		]
	});

	grid.placeAt("gridContainer");
	grid.startup();
});