Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / forum.html
1 <html>\r
2 <head>\r
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
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">var Forum = {};
9
10 //////////////////////////////////////////////////////////////////////////////////////////////
11 // The data store for topics
12 Forum.TopicStore = function(){
13     Forum.TopicStore.superclass.constructor.call(this, {
14         remoteSort: true,
15
16         proxy: new Ext.data.ScriptTagProxy({
17             url: 'http://extjs.com/forum/topics-browse-remote.php'
18         }),
19
20         reader: new Ext.data.JsonReader({
21             root: 'topics',
22             totalProperty: 'totalCount',
23             id: 'threadid'
24         }, [
25             'title', 'forumtitle', 'forumid', 'author',
26             {name: 'replycount', type: 'int'},
27             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
28             'lastposter', 'excerpt'
29         ])
30     });
31
32     this.setDefaultSort('lastpost', 'desc');
33 };
34 Ext.extend(Forum.TopicStore, Ext.data.Store, {
35     loadForum : function(forumId){
36         this.baseParams = {
37             forumId: forumId
38         };
39         this.load({
40             params: {
41                 start:0,
42                 limit:25
43             }
44         });
45     }
46 });
47
48 //////////////////////////////////////////////////////////////////////////////////////////////
49
50 // some renderers
51 Forum.Renderers = {
52     topic : function(value, p, record){
53         return String.format(
54                 '<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',
55                 value, record.data.author, record.id, record.data.forumid);
56     },
57
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']);
60     }
61 };
62
63 //////////////////////////////////////////////////////////////////////////////////////////////
64
65 Forum.SearchView = function(search){
66
67     this.preview = new Ext.Panel({
68         region:'south',
69         height:250,
70         title:'View Message',
71         split:true
72     });
73
74     this.store = new Ext.data.Store({
75         remoteSort: true,
76         proxy: new Ext.data.ScriptTagProxy({
77             url: 'http://extjs.com/forum/topics-browse-remote.php'
78         }),
79         reader: new Ext.data.JsonReader({
80             root: 'topics',
81             totalProperty: 'totalCount',
82             id: 'post_id'
83         }, [
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'}
90         ])
91     });
92     this.store.setDefaultSort('lastpost', 'desc');
93
94
95     this.grid = new Ext.grid.GridPanel({
96         region:'center',
97
98         store: this.store,
99
100         cm: new Ext.grid.ColumnModel([{
101            id: 'topic',
102            header: "Post Title",
103            dataIndex: 'title',
104            width: 420,
105            renderer: Forum.Renderers.topic
106         },{
107            id: 'last',
108            header: "Date Posted",
109            dataIndex: 'lastpost',
110            width: 150,
111            renderer: Ext.util.Format.dateRenderer('M j, Y, g:i a')
112         }]),
113
114         sm: new Ext.grid.RowSelectionModel({
115             singleSelect:true
116         }),
117
118         trackMouseOver:false,
119
120         loadMask: {msg:'Searching...'},
121
122         viewConfig: {
123             forceFit:true,
124             enableRowBody:true,
125             showPreview:true,
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';
130                 }
131                 return 'x-grid3-row-collapsed';
132             }
133         },
134
135         bbar: new Ext.PagingToolbar({
136             pageSize: 25,
137             store: ds,
138             displayInfo: true,
139             displayMsg: 'Displaying results {0} - {1} of {2}',
140             emptyMsg: "No results to display"
141         })
142     });
143
144     Forum.SearchView.superclass.constructor.call(this, {
145         layout:'border',
146         title:'Search: '+Ext.util.Format.htmlEncode('"'+search+'"'),
147         items:[ this.grid, this.preview ]
148      });
149
150     this.store.baseParams = {
151         query: search
152     };
153
154     this.store.load({params:{start:0, limit: 25}});
155 };
156
157 Ext.extend(Forum.SearchView, Ext.Panel);
158
159
160
161 Ext.onReady(function(){
162
163     Ext.QuickTips.init();
164
165     var ds = new Forum.TopicStore();
166
167     var cm = new Ext.grid.ColumnModel([{
168            id: 'topic',
169            header: "Topic",
170            dataIndex: 'title',
171            width: 420,
172            renderer: Forum.Renderers.topic
173         },{
174            header: "Author",
175            dataIndex: 'author',
176            width: 100,
177            hidden: true
178         },{
179            header: "Replies",
180            dataIndex: 'replycount',
181            width: 70,
182            align: 'right'
183         },{
184            id: 'last',
185            header: "Last Post",
186            dataIndex: 'lastpost',
187            width: 150,
188            renderer: Forum.Renderers.lastPost
189         }]);
190
191     cm.defaultSortable = true;
192
193     var viewport = new Ext.Viewport({
194         layout:'border',
195         items:[
196             new Ext.BoxComponent({ // raw
197                 region:'north',
198                 el: 'header',
199                 height:32
200             }),
201             new Ext.tree.TreePanel({
202                 id:'forum-tree',
203                 region:'west',
204                 title:'Forums',
205                 split:true,
206                 width: 325,
207                 minSize: 175,
208                 maxSize: 400,
209                 collapsible: true,
210                 margins:'0 0 5 5',
211                 loader: new Forum.TreeLoader(),
212                 rootVisible:false,
213                 lines:false,
214                 autoScroll:true,
215                 root: new Ext.tree.AsyncTreeNode({
216                           text: 'Forums',
217                           expanded:true
218                       })
219             }),
220             new Ext.TabPanel({
221                 id:'main-tabs',
222                 activeTab:0,
223                 region:'center',
224                 margins:'0 5 5 0',
225                 resizeTabs:true,
226                 tabWidth:150,
227                 items: {
228                     id:'main-view',
229                     layout:'border',
230                     title:'Loading...',
231                     items:[
232                         new Ext.grid.GridPanel({
233                             region:'center',
234                             id:'topic-grid',
235                             store: ds,
236                             cm: cm,
237                             sm:new Ext.grid.RowSelectionModel({
238                                 singleSelect:true,
239                                 listeners: {
240                                     selectionchange: function(sel){
241                                         var rec = sel.getSelected();
242                                         if(rec){
243                                             Ext.getCmp('preview').body.update('<b><u>' + rec.get('title') + '</u></b><br /><br />Post details here.');
244                                         }
245                                     }
246                                 }
247                             }),
248                             trackMouseOver:false,
249                             loadMask: {msg:'Loading Topics...'},
250                             viewConfig: {
251                                 forceFit:true,
252                                 enableRowBody:true,
253                                 showPreview:true,
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';
258                                     }
259                                     return 'x-grid3-row-collapsed';
260                                 }
261                             },
262                             tbar:[
263                                 {
264                                     text:'New Topic',
265                                     iconCls: 'new-topic',
266                                     handler:function(){alert('Not implemented.');}
267                                 },
268                                 '-',
269                                 {
270                                     pressed: true,
271                                     enableToggle:true,
272                                     text:'Preview Pane',
273                                     tooltip: {title:'Preview Pane',text:'Show or hide the Preview Pane'},
274                                     iconCls: 'preview',
275                                     toggleHandler: togglePreview
276                                 },
277                                 ' ',
278                                 {
279                                     pressed: true,
280                                     enableToggle:true,
281                                     text:'Summary',
282                                     tooltip: {title:'Post Summary',text:'View a short summary of each post in the list'},
283                                     iconCls: 'summary',
284                                     toggleHandler: toggleDetails
285                                 }
286                             ],
287                             bbar: new Ext.PagingToolbar({
288                                 pageSize: 25,
289                                 store: ds,
290                                 displayInfo: true,
291                                 displayMsg: 'Displaying topics {0} - {1} of {2}',
292                                 emptyMsg: "No topics to display"
293                             })
294                         }), {
295                             id:'preview',
296                             region:'south',
297                             height:250,
298                             title:'View Topic',
299                             split:true,
300                             bodyStyle: 'padding: 10px; font-family: Arial; font-size: 12px;'
301                         }
302                      ]
303                  }
304               })
305          ]
306     });
307
308     var tree = Ext.getCmp('forum-tree');
309     tree.on('append', function(tree, p, node){
310        if(node.id == 40){
311            node.select.defer(100, node);
312        }
313     });
314     var sm = tree.getSelectionModel();
315     sm.on('beforeselect', function(sm, node){
316          return node.isLeaf();
317     });
318     sm.on('selectionchange', function(sm, node){
319         ds.loadForum(node.id);
320         Ext.getCmp('main-view').setTitle(node.text);
321     });
322
323
324      var searchStore = new Ext.data.Store({
325         proxy: new Ext.data.ScriptTagProxy({
326             url: 'http://extjs.com/forum/topics-browse-remote.php'
327         }),
328         reader: new Ext.data.JsonReader({
329             root: 'topics',
330             totalProperty: 'totalCount',
331             id: 'threadid'
332         }, [
333             'title', 'author',
334             {name: 'lastpost', type: 'date', dateFormat: 'timestamp'}
335         ])
336     });
337
338     // Custom rendering Template
339     var resultTpl = new Ext.XTemplate(
340         '<tpl for=".">',
341             '<div class="x-combo-list-item search-item">{title} by <b>{author}</b></div>',
342         '</tpl>'
343     );
344
345     var search = new Ext.form.ComboBox({
346         store: searchStore,
347         applyTo: 'search',
348         displayField:'title',
349         typeAhead: false,
350         loadingText: 'Searching...',
351         width: 200,
352         pageSize:10,
353         listWidth:550,
354         hideTrigger:true,
355         tpl: resultTpl,
356         minChars:3,
357         emptyText:'Quick Search',
358         onSelect: function(record){ // override default onSelect to do redirect
359             window.location =
360                 String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
361         }
362     });
363     // apply it to the exsting input element
364     //search.applyTo('search');
365
366
367
368     function toggleDetails(btn, pressed){
369         var view = Ext.getCmp('topic-grid').getView();
370         view.showPreview = pressed;
371         view.refresh();
372     }
373
374     function togglePreview(btn, pressed){
375         var preview = Ext.getCmp('preview');
376         preview[pressed ? 'show' : 'hide']();
377         preview.ownerCt.doLayout();
378     }
379 });
380
381 Forum.TreeLoader = function(){
382     Forum.TreeLoader.superclass.constructor.call(this);
383     this.proxy = new Ext.data.ScriptTagProxy({
384         url : this.dataUrl
385     });
386 };
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){
392                 return o;
393             }
394         }, this.addNodes, this, {node:node, cb:cb});
395     },
396
397     addNodes : function(o, arg){
398         var node = arg.node;
399         for(var i = 0, len = o.length; i < len; i++){
400             var n = this.createNode(o[i]);
401             if(n){
402                 node.appendChild(n);
403             }
404         }
405         arg.cb(this, node);
406     }
407 });
408 </pre>    \r
409 </body>\r
410 </html>