/*
 * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function() {

	// create the Data Store
	var store = new Ext.data.Store({
				// load using script tags for cross domain, if the data in on
				// the same domain as
				// this page, an HttpProxy would be better
				proxy : new Ext.data.ScriptTagProxy({
							url : 'http://extjs.com/forum/topics-browse-remote.php'
						}),

				// create reader that reads the Topic records
				reader : new Ext.data.JsonReader({
							root : 'topics',
							totalProperty : 'totalCount',
							// id: 'threadid',
							fields : ['title', 'forumtitle', 'forumid',
									'author', {
										name : 'replycount',
										type : 'int'
									}, {
										name : 'lastpost',
										mapping : 'lastpost',
										type : 'date',
										dateFormat : 'timestamp'
									}, 'lastposter', 'excerpt']
						}),

				// turn on remote sorting
				remoteSort : true
			});
	store.setDefaultSort('lastpost', 'desc');

	// pluggable renders
	function renderTopic(value, p, record) {
		return String.format(
				// '<b><a href="http://extjs.com/forum/showthread.php?t={2}"
				// target="_blank">{0}</a></b><a
				// href="http://extjs.com/forum/forumdisplay.php?f={3}"
				// target="_blank">{1} Forum</a>',
				value, record.data.forumtitle, record.id, record.data.forumid);
	}
	function renderLast(value, p, r) {
		return String.format('{0}<br/>by {1}', value
						.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
	}

	// the column model has information about grid columns
	// dataIndex maps the column to the specific data field in
	// the data store
	var cm = new Ext.grid.ColumnModel([{
				id : 'topic', // id assigned so we can apply custom css (e.g.
								// .x-grid-col-topic b { color:#333 })
				header : "Topic",
				dataIndex : 'title',
				width : 420,
				renderer : renderTopic
			}, {
				header : "Author",
				dataIndex : 'author',
				width : 100,
				hidden : true
			}, {
				header : "Replies",
				dataIndex : 'replycount',
				width : 70,
				align : 'right'
			}, {
				id : 'last',
				header : "Last Post",
				dataIndex : 'lastpost',
				width : 150,
				renderer : renderLast
			}]);

	// by default columns are sortable
	// cm.defaultSortable = true;

	var grid = new Ext.grid.GridPanel({
				el : 'topic-grid',
				width : 700,
				height : 500,
				title : 'ExtJS.com - Browse Forums',
				store : store,
				cm : cm,
				trackMouseOver : false,
				sm : new Ext.grid.RowSelectionModel({
							selectRow : Ext.emptyFn
						}),
				loadMask : true,
				/*
				 * viewConfig: { forceFit:true, enableRowBody:true,
				 * showPreview:true, getRowClass : function(record, rowIndex, p,
				 * store){ if(this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>';
				 * return 'x-grid3-row-expanded'; } return
				 * 'x-grid3-row-collapsed'; } },
				 */
				bbar : new Ext.PagingToolbar({
							pageSize : 25,
							store : store,
							displayInfo : true,
							displayMsg : 'Displaying topics {0} - {1} of {2}',
							emptyMsg : "No topics to display",
							items : ['-', {
										pressed : true,
										enableToggle : true,
										text : 'Show Preview',
										cls : 'x-btn-text-icon details',
										toggleHandler : toggleDetails
									}]
						})
			});

	// render it
	grid.render();

	// trigger the data store load
	store.load({
				params : {
					start : 0,
					limit : 25
				}
			});

	function toggleDetails(btn, pressed) {
		var view = grid.getView();
		view.showPreview = pressed;
		view.refresh();
	}
});