forum.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:13k
源码类别:

中间件编程

开发平台:

JavaScript

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