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

Ext.onReady(function() {
	var ds = new Ext.data.Store({
				proxy : new Ext.data.ScriptTagProxy({
							url : 'http://extjs.com/forum/topics-remote.php'
						}),
				reader : new Ext.data.JsonReader({
							root : 'topics',
							totalProperty : 'totalCount',
							id : 'post_id'
						}, [{
									name : 'postId',
									mapping : 'post_id'
								}, {
									name : 'title',
									mapping : 'topic_title'
								}, {
									name : 'topicId',
									mapping : 'topic_id'
								}, {
									name : 'author',
									mapping : 'author'
								}, {
									name : 'lastPost',
									mapping : 'post_time',
									type : 'date',
									dateFormat : 'timestamp'
								}, {
									name : 'excerpt',
									mapping : 'post_text'
								}]),

				baseParams : {
					limit : 20,
					forumId : 4
				}
			});

	// Custom rendering Template for the View
	var resultTpl = new Ext.XTemplate(
			'<tpl for=".">',
			'<div class="search-item">',
			'<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',
			'<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
			'<p>{excerpt}</p>', '</div></tpl>');

	var panel = new Ext.Panel({
				applyTo : 'search-panel',
				title : 'Forum Search',
				height : 300,
				autoScroll : true,

				items : new Ext.DataView({
							tpl : resultTpl,
							store : ds,
							itemSelector : 'div.search-item'
						}),

				tbar : ['Search: ', ' ', new Ext.app.SearchField({
									store : ds,
									width : 320
								})],

				bbar : new Ext.PagingToolbar({
							store : ds,
							pageSize : 20,
							displayInfo : true,
							displayMsg : 'Topics {0} - {1} of {2}',
							emptyMsg : "No topics to display"
						})
			});

	ds.load({
				params : {
					start : 0,
					limit : 20,
					forumId : 4
				}
			});
});