/*
	Author       : Jay Garcia
	Site         : http://tdg-i.com
	Blog post    : http://tdg-i.com/63/how-to-integrate-the-progress-bar-with-the-paging-toolbar
	Contact Info : jgarcia@tdg-i.com
	Purpose      : An integrated progress bar for the Paging toolbar 
	Warranty     : none
	Price        : free
	Version      : b1
	Date         : 01/29/2009
	
*/


Ext.onReady(function(){
	var fields = [
		{ 
			name    : 'name', 
			mapping : 'name'
		},
		{
			name    : 'column1', 
			mapping : 'column1'
		},
		{
			name    : 'column2', 
			mapping : 'column2'
		}
	];
	var store = new Ext.data.JsonStore({
		url           : 'mockData.php',
		root          : 'data',
		totalProperty : 'total',
		fields        : fields,
		autoLoad      : true
	});
	
	
	var pgToolbar = new  Ext.ux.plugins.ProgressPagingToolbar({
		displayInfo : true,
		store       : store
	});

	// Column Model shortcut array
	var cols = [
		{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
		{header: "column1", width: 75, sortable: true, dataIndex: 'column1'},
		{header: "column2", width: 85, sortable: true, dataIndex: 'column2'}
	];
    
	// declare the source Grid
    var grid = new Ext.grid.GridPanel({
        store            : store,
		border           : false,
        columns          : cols,
        autoExpandColumn : 'name',
		bbar             : pgToolbar
    });
	
	new Ext.Window({
		layout : 'fit',
		height : 400,
		width  : 500,
		border : false,
		title  : 'Custom progress indicator for ' + Ext.version,
		items  : grid
	}).show();


});