yurychika/test_formatSort.html

## test_formatSort.html
<!DOCTYPE html>
<html>
<head>
	<title>Grid Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel='stylesheet' href="../../gridx/tests/support/common.css" />
	<style type="text/css">
		.gridx {
			width: 500px;
			height: 420px;
		}
		.gridxCell table td, .gridxCell table th{
			border: 1px solid black;
		}
		.gridxCell table th{
			color: white;
			background: indianred;
		}
		.gridxCell table{
			border-collapse: collapse;
			width: 100%;
		}
		.gridxCell{
			margin: 0;
			padding: 0 !important;
		}
	</style>
	<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
	<!--<script type="text/javascript" src='test_grid.js'></script>-->
	<script type='text/javascript'>
		require(['dojo/data/ItemFileWriteStore',
				'dojo/store/DataStore',
				'gridx/Grid',
				'gridx/allModules',
				"gridx/core/model/extensions/FormatSort",
				'dojo/domReady!'], function(ItemFileWriteStore, DataStore, Grid, mods){
			var data = [
				{id: 1, name: 'gee'},
				{id: 2, name: 'citychess'}
			];

			var s = new ItemFileWriteStore({ data: {  items: data }, hierarchical: false});
			var store = new DataStore({store: s});
			var structure = [
				{id: 1, name: 'id', field: 'id'},
				{id: 2, name: 'name', field: 'name'},

			]

			// console.log(mods.SingleSort);
			// console.log(mods.VirtualVScroller);
			// console.log(mods.CellWidget);
			// console.log(mods.Focus	);

			// grid = new Grid();

			grid = new Grid({
		            cacheClass: "gridx/core/model/cache/Sync",
		            store: store,   // created earlier:
		            structure: structure, // is kinda complicated
		            modelExtensions: [
                          "gridx/core/model/extensions/FormatSort"
                  	],
		            modules: [
		                //Declare this module in the "modules" parameter.
		                {
		                    moduleClass: mods.SingleSort,
		                    initialOrder:  [],
		                },
		                {
		                    moduleClass: mods.VirtualVScroller,
		                    vScrollerBuffSize: 20
		                },
		                // {
		                //     moduleClass: mods.Dod,
		                //     defaultShow: false,
		                //     useAnimation: true,
		                //     showExpando: true,
		                //     detailProvider: lang.hitch(this, this.detailProvider)
		                // },
		                mods.CellWidget,
		                mods.Focus
		            ]
	        });
			grid.placeAt('gridContainer');
			grid.startup();
		});

	</script>
</head>
<body class='claro'>
	<h1 class='title' tabindex='0' onfocus='this.style.color="blue"' onblur='this.style.color=""'>
		Grid AlwaysEditing Test
	</h1>
	<h2>Apply on blur</h2>
	<style type='text/css'>
	#gridContainer{
		width: 500px;
		height: 500px;
		border: 1px solid red;
	}
	</style>
	<div id='gridContainer'>

	</div>
<!-- 	<div jsid='grid' id='grid' data-dojo-type='gridx.Grid' data-dojo-props='
		cacheClass: "gridx/core/model/cache/Sync",
		store: store1,
		structure: layout,
		autoWidth: true,
		modules: [

			"gridx/modules/Filter",
			"gridx/modules/filter/QuickFilter"
		]
	'></div> -->

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Grid Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel='stylesheet' href="../../gridx/tests/support/common.css" />
	<style type="text/css">
	.gridx {
	width: 500px;
	height: 420px;
	}
	.gridxCell table td, .gridxCell table th{
	border: 1px solid black;
	}
	.gridxCell table th{
	color: white;
	background: indianred;
	}
	.gridxCell table{
	border-collapse: collapse;
	width: 100%;
	}
	.gridxCell{
	margin: 0;
	padding: 0 !important;
	}
	</style>
	<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
	<!--<script type="text/javascript" src='test_grid.js'></script>-->
	<script type='text/javascript'>
	require(['dojo/data/ItemFileWriteStore',
	'dojo/store/DataStore',
	'gridx/Grid',
	'gridx/allModules',
	"gridx/core/model/extensions/FormatSort",
	'dojo/domReady!'], function(ItemFileWriteStore, DataStore, Grid, mods){
	var data = [
	{id: 1, name: 'gee'},
	{id: 2, name: 'citychess'}
	];

	var s = new ItemFileWriteStore({ data: { items: data }, hierarchical: false});
	var store = new DataStore({store: s});
	var structure = [
	{id: 1, name: 'id', field: 'id'},
	{id: 2, name: 'name', field: 'name'},

	]

	// console.log(mods.SingleSort);
	// console.log(mods.VirtualVScroller);
	// console.log(mods.CellWidget);
	// console.log(mods.Focus );

	// grid = new Grid();

	grid = new Grid({
	cacheClass: "gridx/core/model/cache/Sync",
	store: store, // created earlier:
	structure: structure, // is kinda complicated
	modelExtensions: [
	"gridx/core/model/extensions/FormatSort"
	],
	modules: [
	//Declare this module in the "modules" parameter.
	{
	moduleClass: mods.SingleSort,
	initialOrder: [],
	},
	{
	moduleClass: mods.VirtualVScroller,
	vScrollerBuffSize: 20
	},
	// {
	// moduleClass: mods.Dod,
	// defaultShow: false,
	// useAnimation: true,
	// showExpando: true,
	// detailProvider: lang.hitch(this, this.detailProvider)
	// },
	mods.CellWidget,
	mods.Focus
	]
	});
	grid.placeAt('gridContainer');
	grid.startup();
	});

	</script>
	</head>
	<body class='claro'>
	<h1 class='title' tabindex='0' onfocus='this.style.color="blue"' onblur='this.style.color=""'>
	Grid AlwaysEditing Test
	</h1>
	<h2>Apply on blur</h2>
	<style type='text/css'>
	#gridContainer{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	}
	</style>
	<div id='gridContainer'>

	</div>
	<!-- <div jsid='grid' id='grid' data-dojo-type='gridx.Grid' data-dojo-props='
	cacheClass: "gridx/core/model/cache/Sync",
	store: store1,
	structure: layout,
	autoWidth: true,
	modules: [

	"gridx/modules/Filter",
	"gridx/modules/filter/QuickFilter"
	]
	'></div> -->

	</body>
	</html>