3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">var Forum = {};
10 //////////////////////////////////////////////////////////////////////////////////////////////
11 // The data store for topics
12 Forum.TopicStore = function(){
13 Forum.TopicStore.superclass.constructor.call(this, {
16 proxy: new Ext.data.ScriptTagProxy({
17 url: 'http://extjs.com/forum/topics-browse-remote.php'
20 reader: new Ext.data.JsonReader({
22 totalProperty: 'totalCount',
25 'title', 'forumtitle', 'forumid', 'author',
26 {name: 'replycount', type: 'int'},
27 {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
28 'lastposter', 'excerpt'
32 this.setDefaultSort('lastpost', 'desc');
34 Ext.extend(Forum.TopicStore, Ext.data.Store, {
35 loadForum : function(forumId){
48 //////////////////////////////////////////////////////////////////////////////////////////////
52 topic : function(value, p, record){
54 '<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',
55 value, record.data.author, record.id, record.data.forumid);
58 lastPost : function(value, p, r){
59 return String.format('<span class="post-date">{0}</span><br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
63 //////////////////////////////////////////////////////////////////////////////////////////////
65 Forum.SearchView = function(search){
67 this.preview = new Ext.Panel({
74 this.store = new Ext.data.Store({
76 proxy: new Ext.data.ScriptTagProxy({
77 url: 'http://extjs.com/forum/topics-browse-remote.php'
79 reader: new Ext.data.JsonReader({
81 totalProperty: 'totalCount',
84 {name: 'postId', mapping: 'post_id'},
85 {name: 'title', mapping: 'topic_title'},
86 {name: 'topicId', mapping: 'topic_id'},
87 {name: 'author', mapping: 'author'},
88 {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
89 {name: 'excerpt', mapping: 'post_text'}
92 this.store.setDefaultSort('lastpost', 'desc');
95 this.grid = new Ext.grid.GridPanel({
100 cm: new Ext.grid.ColumnModel([{
102 header: "Post Title",
105 renderer: Forum.Renderers.topic
108 header: "Date Posted",
109 dataIndex: 'lastpost',
111 renderer: Ext.util.Format.dateRenderer('M j, Y, g:i a')
114 sm: new Ext.grid.RowSelectionModel({
118 trackMouseOver:false,
120 loadMask: {msg:'Searching...'},
126 getRowClass : function(record, rowIndex, p, ds){
127 if(this.showPreview){
128 p.body = '<p>'+record.data.excerpt+'</p>';
129 return 'x-grid3-row-expanded';
131 return 'x-grid3-row-collapsed';
135 bbar: new Ext.PagingToolbar({
139 displayMsg: 'Displaying results {0} - {1} of {2}',
140 emptyMsg: "No results to display"
144 Forum.SearchView.superclass.constructor.call(this, {
146 title:'Search: '+Ext.util.Format.htmlEncode('"'+search+'"'),
147 items:[ this.grid, this.preview ]
150 this.store.baseParams = {
154 this.store.load({params:{start:0, limit: 25}});
157 Ext.extend(Forum.SearchView, Ext.Panel);
161 Ext.onReady(function(){
163 Ext.QuickTips.init();
165 var ds = new Forum.TopicStore();
167 var cm = new Ext.grid.ColumnModel([{
172 renderer: Forum.Renderers.topic
180 dataIndex: 'replycount',
186 dataIndex: 'lastpost',
188 renderer: Forum.Renderers.lastPost
191 cm.defaultSortable = true;
193 var viewport = new Ext.Viewport({
196 new Ext.BoxComponent({ // raw
201 new Ext.tree.TreePanel({
211 loader: new Forum.TreeLoader(),
215 root: new Ext.tree.AsyncTreeNode({
232 new Ext.grid.GridPanel({
237 sm:new Ext.grid.RowSelectionModel({
240 selectionchange: function(sel){
241 var rec = sel.getSelected();
243 Ext.getCmp('preview').body.update('<b><u>' + rec.get('title') + '</u></b><br /><br />Post details here.');
248 trackMouseOver:false,
249 loadMask: {msg:'Loading Topics...'},
254 getRowClass : function(record, rowIndex, p, ds){
255 if(this.showPreview){
256 p.body = '<p>'+record.data.excerpt+'</p>';
257 return 'x-grid3-row-expanded';
259 return 'x-grid3-row-collapsed';
265 iconCls: 'new-topic',
266 handler:function(){alert('Not implemented.');}
273 tooltip: {title:'Preview Pane',text:'Show or hide the Preview Pane'},
275 toggleHandler: togglePreview
282 tooltip: {title:'Post Summary',text:'View a short summary of each post in the list'},
284 toggleHandler: toggleDetails
287 bbar: new Ext.PagingToolbar({
291 displayMsg: 'Displaying topics {0} - {1} of {2}',
292 emptyMsg: "No topics to display"
300 bodyStyle: 'padding: 10px; font-family: Arial; font-size: 12px;'
308 var tree = Ext.getCmp('forum-tree');
309 tree.on('append', function(tree, p, node){
311 node.select.defer(100, node);
314 var sm = tree.getSelectionModel();
315 sm.on('beforeselect', function(sm, node){
316 return node.isLeaf();
318 sm.on('selectionchange', function(sm, node){
319 ds.loadForum(node.id);
320 Ext.getCmp('main-view').setTitle(node.text);
324 var searchStore = new Ext.data.Store({
325 proxy: new Ext.data.ScriptTagProxy({
326 url: 'http://extjs.com/forum/topics-browse-remote.php'
328 reader: new Ext.data.JsonReader({
330 totalProperty: 'totalCount',
334 {name: 'lastpost', type: 'date', dateFormat: 'timestamp'}
338 // Custom rendering Template
339 var resultTpl = new Ext.XTemplate(
341 '<div class="x-combo-list-item search-item">{title} by <b>{author}</b></div>',
345 var search = new Ext.form.ComboBox({
348 displayField:'title',
350 loadingText: 'Searching...',
357 emptyText:'Quick Search',
358 onSelect: function(record){ // override default onSelect to do redirect
360 String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
363 // apply it to the exsting input element
364 //search.applyTo('search');
368 function toggleDetails(btn, pressed){
369 var view = Ext.getCmp('topic-grid').getView();
370 view.showPreview = pressed;
374 function togglePreview(btn, pressed){
375 var preview = Ext.getCmp('preview');
376 preview[pressed ? 'show' : 'hide']();
377 preview.ownerCt.doLayout();
381 Forum.TreeLoader = function(){
382 Forum.TreeLoader.superclass.constructor.call(this);
383 this.proxy = new Ext.data.ScriptTagProxy({
387 Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
388 dataUrl: 'http://extjs.com/forum/forums-remote.php',
389 requestData : function(node, cb){
390 this.proxy.request('read', null, {}, {
391 readRecords : function(o){
394 }, this.addNodes, this, {node:node, cb:cb});
397 addNodes : function(o, arg){
399 for(var i = 0, len = o.length; i < len; i++){
400 var n = this.createNode(o[i]);