rhpijnacker · December 22, 2015 19:39
diff --git a/grid_test b/grid_test
 <!DOCTYPE HTML>
 <html>
  <head>
    <title>dgrid performance test</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css" />
    <script type="text/javascript">
      var dojoConfig = {
        async: true,
        baseUrl: "./",
        parseOnLoad: false,
        paths: {
          "dojo": "./dojo",
          "dojox": "./dojox",
          "dijit": "./dijit",
          "dgrid": "./dgrid",
          "put-selector": "./put-selector",
          "xstyle": "./xstyle"
        }
      };
    </script>
    <script src="dojo/dojo.js" type="text/javascript"></script>
  </head>
  <body class="claro">
      <div style="display: inline; width: 100%; height: 100%">
        <div id="grid"></div>
      </div>
    <script>
      require([
        'dojo/_base/array',
        'dojo/_base/declare',
        'dojo/date/locale',
        'dojo/store/Memory',
        'dojo/store/Observable',
        'dijit/Menu',
        'dijit/MenuItem',
        'dgrid/OnDemandGrid',
        'dgrid/Selection',
        'dojo/ready'
      ], function(
        array,
        declare,
        dateLocale,
        Memory,
        Observable,
        Menu,
        MenuItem,
        OnDemandGrid,
        Selection
      ) {
        var SIZE = 100;
        var now = Date.now();
        var memory = new Memory();
        var observable = new Observable(memory);
        var store = observable;

        function createItem(id) {
          var item = {
            id: id,
            integer: Math.floor(Math.random() * 100),
            floatNum: Math.random() * 100,
            date: new Date(now * Math.random() * 2),
            date2: new Date(now - Math.random() * 1000000000),
            text: "A number in text " + Math.random(),
            bool: Math.random() > 0.5,
            bool2: Math.random() > 0.5,
            price: Math.random() * 100
          };
          return item;
        }

        function fillStore(store) {
          for (var i = 0; i < SIZE; i++) {
            var item = createItem(i);
            store.add(item);
          }
        }

        function gridSelection(grid) {
          var selection = grid.selection;
          var gridSelection = [];
          for (var id in selection) {
            if (selection[id]) {
              gridSelection.push(grid.store.get(id));
            }
          }
          return gridSelection;
        }

        function updatePrice(grid) {
          var selection = gridSelection(grid);
          array.forEach(selection, function(obj) {
            obj.price = - obj.price;
            grid.store.notify(obj, obj.id);
          });
        }

        function popupContextMenu(grid) {
          var popupMenu = new Menu({
            contextMenuForWindow: true
          });
          popupMenu.addChild(new MenuItem({ label: 'Update price' }));
          popupMenu.addChild(new MenuItem({ label: 'Refresh' }));
          popupMenu.startup();
          popupMenu.on('close', function() { popupMenu.destroyRecursive(); });
          popupMenu.on('itemclick', function(item) {
            if (item.label === 'Update price') {
              updatePrice(grid);
            } else {
              grid.refresh();
            }
          });
        }

        function formatDate(date) {
          return dateLocale.format(date, { selector: 'date', formatLength: 'medium' });
        }

        function createGrid(gridId, textId, query) {
          var columns = [
            { name: 'Column 0', field: 'id' },
            { name: 'Column 1', field: 'integer' },
            { name: 'Column 2', field: 'floatNum' },
            { name: 'Column 3', field: 'date', get: function(item) { return formatDate(item.date) } },
            { name: 'Column 4', field: 'date2', get: function(item) { return formatDate(item.date2) } },
            { name: 'Column 5', field: 'bool' },
            { name: 'Column 6', field: 'bool2' },
            { name: 'Column 7', field: 'price' },
          ];
          var CustomGrid = declare('Grid', [OnDemandGrid, Selection]);
          var grid = new CustomGrid({ columns: columns }, gridId);

          grid.on('.dgrid-row:contextmenu', function(evt) {
            evt.preventDefault();
            popupContextMenu(grid);
          });
          return grid;
        }

        var grid = createGrid('grid');
        fillStore(store);
        grid.set("store", store);

        // trigger bug:
        var obj;
        function notify() {
          for (var i = SIZE-1; 0 <= i; i--) {
            obj = store.get(i);
            store.notify(obj, obj.id);
          }
        }
        notify();
        notify();
        notify();
      });
    </script>
  </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>dgrid performance test</title>
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
	<script type="text/javascript">
	var dojoConfig = {
	async: true,
	baseUrl: "./",
	parseOnLoad: false,
	paths: {
	"dojo": "./dojo",
	"dojox": "./dojox",
	"dijit": "./dijit",
	"dgrid": "./dgrid",
	"put-selector": "./put-selector",
	"xstyle": "./xstyle"
	}
	};
	</script>
	<script src="dojo/dojo.js" type="text/javascript"></script>
	</head>
	<body class="claro">
	<div style="display: inline; width: 100%; height: 100%">
	<div id="grid"></div>
	</div>
	<script>
	require([
	'dojo/_base/array',
	'dojo/_base/declare',
	'dojo/date/locale',
	'dojo/store/Memory',
	'dojo/store/Observable',
	'dijit/Menu',
	'dijit/MenuItem',
	'dgrid/OnDemandGrid',
	'dgrid/Selection',
	'dojo/ready'
	], function(
	array,
	declare,
	dateLocale,
	Memory,
	Observable,
	Menu,
	MenuItem,
	OnDemandGrid,
	Selection
	) {
	var SIZE = 100;
	var now = Date.now();
	var memory = new Memory();
	var observable = new Observable(memory);
	var store = observable;

	function createItem(id) {
	var item = {
	id: id,
	integer: Math.floor(Math.random() * 100),
	floatNum: Math.random() * 100,
	date: new Date(now * Math.random() * 2),
	date2: new Date(now - Math.random() * 1000000000),
	text: "A number in text " + Math.random(),
	bool: Math.random() > 0.5,
	bool2: Math.random() > 0.5,
	price: Math.random() * 100
	};
	return item;
	}

	function fillStore(store) {
	for (var i = 0; i < SIZE; i++) {
	var item = createItem(i);
	store.add(item);
	}
	}

	function gridSelection(grid) {
	var selection = grid.selection;
	var gridSelection = [];
	for (var id in selection) {
	if (selection[id]) {
	gridSelection.push(grid.store.get(id));
	}
	}
	return gridSelection;
	}

	function updatePrice(grid) {
	var selection = gridSelection(grid);
	array.forEach(selection, function(obj) {
	obj.price = - obj.price;
	grid.store.notify(obj, obj.id);
	});
	}

	function popupContextMenu(grid) {
	var popupMenu = new Menu({
	contextMenuForWindow: true
	});
	popupMenu.addChild(new MenuItem({ label: 'Update price' }));
	popupMenu.addChild(new MenuItem({ label: 'Refresh' }));
	popupMenu.startup();
	popupMenu.on('close', function() { popupMenu.destroyRecursive(); });
	popupMenu.on('itemclick', function(item) {
	if (item.label === 'Update price') {
	updatePrice(grid);
	} else {
	grid.refresh();
	}
	});
	}

	function formatDate(date) {
	return dateLocale.format(date, { selector: 'date', formatLength: 'medium' });
	}

	function createGrid(gridId, textId, query) {
	var columns = [
	{ name: 'Column 0', field: 'id' },
	{ name: 'Column 1', field: 'integer' },
	{ name: 'Column 2', field: 'floatNum' },
	{ name: 'Column 3', field: 'date', get: function(item) { return formatDate(item.date) } },
	{ name: 'Column 4', field: 'date2', get: function(item) { return formatDate(item.date2) } },
	{ name: 'Column 5', field: 'bool' },
	{ name: 'Column 6', field: 'bool2' },
	{ name: 'Column 7', field: 'price' },
	];
	var CustomGrid = declare('Grid', [OnDemandGrid, Selection]);
	var grid = new CustomGrid({ columns: columns }, gridId);

	grid.on('.dgrid-row:contextmenu', function(evt) {
	evt.preventDefault();
	popupContextMenu(grid);
	});
	return grid;
	}

	var grid = createGrid('grid');
	fillStore(store);
	grid.set("store", store);

	// trigger bug:
	var obj;
	function notify() {
	for (var i = SIZE-1; 0 <= i; i--) {
	obj = store.get(i);
	store.notify(obj, obj.id);
	}
	}
	notify();
	notify();
	notify();
	});
	</script>
	</body>
	</html>