Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.GridFormatTutorial = {
	init: function(){		
		var store = new Ext.data.JsonStore({
			url: 'gridformat.php',
			root: 'data',
			totalProperty: 'total',
			paramNames: {
				start : 'offset',  // The parameter name which specifies the start row
				limit : 'size',  // The parameter name which specifies number of rows to return
				sort : 'sort',    // The parameter name which specifies the column to sort on
				dir : 'dir'       // The parameter name which specifies the sort direction
			},
			fields: ['breed','origin',{name:'agressive',type:'boolean'},'image','description']
		});
		store.load();
				
		var pager = new Ext.PagingToolbar({
			store: store, // <--grid and PagingToolbar using same store
			displayInfo: true,
			displayMsg: '{0} - {1} of {2} Dog breeds',
			emptyMsg: 'No dog breeds to display',
			pageSize: 5
		});
		
		var grid = new Ext.grid.GridPanel({
			store: store, // <--grid and PagingToolbar using same store
			columns: [
				new Ext.grid.RowNumberer(),
				{header:'Picture', dataIndex:'image',width:150,sortable: true,renderer: this.showImage},
				{header:'Breed name', dataIndex:'breed',width:140,sortable: true,renderer: this.showBreed},
				{header:'Description', dataIndex:'description',width:180,renderer: this.showDescription},
				{header:'Agressive', dataIndex:'agressive', width:60,sortable: true,renderer: this.showAgressive}
			],
			bbar: pager, // <--adding the pagingtoolbar to the grid
			border: false,
			stripeRows: true
		});


		var win = new Ext.Window({
			title: 'Grid example',
			layout: 'fit',
			width: 590,
			height:450,
			items: grid
		});

		win.show();
	},
	
	showImage: function(value, metaData, record, rowIndex, colIndex, store){
		return '<img src="'+value+'" alt="'+record.get('breed')+'" style="width:140px" />';
	},
	
	showBreed: function(value, metaData, record, rowIndex, colIndex, store){
		metaData.attr = 'style="white-space:normal"';
		return '<em class="name">'+value+'</em> - '+record.get('origin');
	},
	
	showDescription: function(value,metaData){
		metaData.attr = 'style="white-space:normal"';
		return value;
	},
	
	showAgressive: function(value,metaData){
		metaData.attr = value?'style="color:#f00"':'style="color:#0a0"';
		return value?'Yes':'No';
	}
}

Ext.onReady(com.quizzpot.tutorial.GridFormatTutorial.init,com.quizzpot.tutorial.GridFormatTutorial);