ExtAnimal/grid-perf-test.html

## grid-perf-test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
* {
    font-family: tahoma, arial, verdana, sans-serif;
    font-size: 12px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {

    function createFakeData(count) {
        var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
            lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
            ratings      = [1, 2, 3, 4, 5],
            salaries     = [100, 400, 900, 1500, 1000000],
            resultComp   = Ext.getCmp('result'),
            start;

        var data = [];
        for (var i = 0; i < (count || 25); i++) {
            var ratingId    = Math.floor(Math.random() * ratings.length),
                salaryId    = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId  = Math.floor(Math.random() * lastNames.length),

                rating      = ratings[ratingId],
                salary      = salaries[salaryId],
                name        = firstNames[firstNameId] + ' ' + lastNames[lastNameId];

            data.push({
                rating: rating,
                salary: salary,
                name: name
            });
        }
        resultComp.el.dom.innerHTML = 'Loading...';
        start = new Date().getTime();
        store.loadData(data);
        resultComp.el.dom.innerHTML = 'Grid update time (ms): ' + (new Date().getTime() - start);
    }

    var Employee = Ext.data.Record.create([
       {name: 'rating', type: 'int'},
       {name: 'salary', type: 'float'},
       {name: 'name'}
    ]);

    // create the Data Store
    var store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({

        }, Employee)
    });

    var grid = new Ext.grid.GridPanel({
        region: 'center',
        title: 'Grid loaded with varying number of records',
        margins: '0 5 5 0',
        store: store,
        viewConfig: {
            forceFit: true
        },
        enableColumnMove: false,
        columns:[ new Ext.grid.RowNumberer({
            width: 39
        }), {
            header: 'Name',
            width: 300,
            sortable: true,
            dataIndex: 'name'
        },{
            header: 'Rating',
            width: 125,
            sortable: true,
            dataIndex: 'rating'
        },{
            header: 'Salary',
            width: 125,
            sortable: true,
            dataIndex: 'salary',
            align: 'right',
            renderer: Ext.util.Format.usMoney
        }]
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            xtype: 'toolbar',
            style: {
                border: '1px solid #99bce8'
            },
            height: 27,
            margins: '5 5 5 5',
            defaults: {
                handler: function(b) {
                    createFakeData(b.count);
                }
            },
            items: [{
                 text: '20 Items',
                 count: 20
            },{
                 text: '100 Items',
                 count: 100
            },{
                 text: '300 Items',
                 count: 300
            },{
                 text: '1000 Items',
                 count: 1000
            },{
                 text: '5000 Items',
                 count: 5000
            },{
                 text: '10000 Items',
                 count: 10000
            }]
        }, {
            region: 'west',
            xtype: 'tabpanel',
            width: 200,
            margins: '0 5 5 5',
            activeTab: 0,
            items: [{
                title: 'Bogus 1'
            }, {
                title: 'Bogus 2'
            }]
        }, grid, {
            xtype: 'box',
            region: 'south',
            height: '14',
            margins: '0 5 5 5',
            id: 'result'
        }]
    })

    createFakeData(20);
});
</script>
</head>
<body></body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Stateful Array Grid Example</title>

	<!-- CSS -->
	<!-- base library -->
	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

	<!-- Javascript -->
	<!-- ExtJS library: base/adapter -->
	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

	<!-- ExtJS library: all widgets -->
	<script type="text/javascript" src="../../ext-all-debug.js"></script>
	<style type="text/css">
	* {
	font-family: tahoma, arial, verdana, sans-serif;
	font-size: 12px;
	}
	</style>
	<script type="text/javascript">
	Ext.onReady(function() {

	function createFakeData(count) {
	var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
	lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
	ratings = [1, 2, 3, 4, 5],
	salaries = [100, 400, 900, 1500, 1000000],
	resultComp = Ext.getCmp('result'),
	start;

	var data = [];
	for (var i = 0; i < (count \|\| 25); i++) {
	var ratingId = Math.floor(Math.random() * ratings.length),
	salaryId = Math.floor(Math.random() * salaries.length),
	firstNameId = Math.floor(Math.random() * firstNames.length),
	lastNameId = Math.floor(Math.random() * lastNames.length),

	rating = ratings[ratingId],
	salary = salaries[salaryId],
	name = firstNames[firstNameId] + ' ' + lastNames[lastNameId];

	data.push({
	rating: rating,
	salary: salary,
	name: name
	});
	}
	resultComp.el.dom.innerHTML = 'Loading...';
	start = new Date().getTime();
	store.loadData(data);
	resultComp.el.dom.innerHTML = 'Grid update time (ms): ' + (new Date().getTime() - start);
	}

	var Employee = Ext.data.Record.create([
	{name: 'rating', type: 'int'},
	{name: 'salary', type: 'float'},
	{name: 'name'}
	]);

	// create the Data Store
	var store = new Ext.data.Store({
	reader: new Ext.data.JsonReader({

	}, Employee)
	});

	var grid = new Ext.grid.GridPanel({
	region: 'center',
	title: 'Grid loaded with varying number of records',
	margins: '0 5 5 0',
	store: store,
	viewConfig: {
	forceFit: true
	},
	enableColumnMove: false,
	columns:[ new Ext.grid.RowNumberer({
	width: 39
	}), {
	header: 'Name',
	width: 300,
	sortable: true,
	dataIndex: 'name'
	},{
	header: 'Rating',
	width: 125,
	sortable: true,
	dataIndex: 'rating'
	},{
	header: 'Salary',
	width: 125,
	sortable: true,
	dataIndex: 'salary',
	align: 'right',
	renderer: Ext.util.Format.usMoney
	}]
	});

	var viewport = new Ext.Viewport({
	layout: 'border',
	items: [{
	region: 'north',
	xtype: 'toolbar',
	style: {
	border: '1px solid #99bce8'
	},
	height: 27,
	margins: '5 5 5 5',
	defaults: {
	handler: function(b) {
	createFakeData(b.count);
	}
	},
	items: [{
	text: '20 Items',
	count: 20
	},{
	text: '100 Items',
	count: 100
	},{
	text: '300 Items',
	count: 300
	},{
	text: '1000 Items',
	count: 1000
	},{
	text: '5000 Items',
	count: 5000
	},{
	text: '10000 Items',
	count: 10000
	}]
	}, {
	region: 'west',
	xtype: 'tabpanel',
	width: 200,
	margins: '0 5 5 5',
	activeTab: 0,
	items: [{
	title: 'Bogus 1'
	}, {
	title: 'Bogus 2'
	}]
	}, grid, {
	xtype: 'box',
	region: 'south',
	height: '14',
	margins: '0 5 5 5',
	id: 'result'
	}]
	})

	createFakeData(20);
	});
	</script>
	</head>
	<body></body>
	</html>