JavaScript DHTML/Ext JS/Forum — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:59, 26 мая 2010
Forum.SearchView, Forum.TopicStore
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
var Forum = {}; ////////////////////////////////////////////////////////////////////////////////////////////// // The data store for topics Forum.TopicStore = function(){
Forum.TopicStore.superclass.constructor.call(this, { remoteSort: true, proxy: new Ext.data.ScriptTagProxy({ url: "http://extjs.ru/forum/topics-browse-remote.php" }), reader: new Ext.data.JsonReader({ root: "topics", totalProperty: "totalCount", id: "threadid" }, [ "title", "forumtitle", "forumid", "author", {name: "replycount", type: "int"}, {name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"}, "lastposter", "excerpt" ]) }); this.setDefaultSort("lastpost", "desc");
}; Ext.extend(Forum.TopicStore, Ext.data.Store, {
loadForum : function(forumId){ this.baseParams = { forumId: forumId }; this.load({ params: { start:0, limit:25 } }); }
}); ////////////////////////////////////////////////////////////////////////////////////////////// // some renderers Forum.Renderers = {
topic : function(value, p, record){ return String.format("
value, record.data.author, record.id, record.data.forumid); }, lastPost : function(value, p, r){ return String.format("{0}
by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]); }
}; ////////////////////////////////////////////////////////////////////////////////////////////// Forum.SearchView = function(search){
this.preview = new Ext.Panel({ region:"south", height:250, title:"View Message", split:true }); this.store = new Ext.data.Store({ remoteSort: true, proxy: new Ext.data.ScriptTagProxy({ url: "http://extjs.ru/forum/topics-browse-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"} ]) }); this.store.setDefaultSort("lastpost", "desc");
this.grid = new Ext.grid.GridPanel({ region:"center", store: this.store, cm: new Ext.grid.ColumnModel([{ id: "topic", header: "Post Title", dataIndex: "title", width: 420, renderer: Forum.Renderers.topic },{ id: "last", header: "Date Posted", dataIndex: "lastpost", width: 150, renderer: Ext.util.Format.dateRenderer("M j, Y, g:i a") }]), sm: new Ext.grid.RowSelectionModel({ singleSelect:true }), trackMouseOver:false, loadMask: {msg:"Searching..."}, viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, ds){ if(this.showPreview){p.body = "
"+record.data.excerpt+"
";return "x-grid3-row-expanded"; } return "x-grid3-row-collapsed"; } }, bbar: new Ext.PagingToolbar({ pageSize: 25, store: ds, displayInfo: true, displayMsg: "Displaying results {0} - {1} of {2}", emptyMsg: "No results to display" }) }); Forum.SearchView.superclass.constructor.call(this, { layout:"border", title:"Search: "+Ext.util.Format.htmlEncode("""+search+"""), items:[ this.grid, this.preview ] }); this.store.baseParams = { query: search }; this.store.load({params:{start:0, limit: 25}});
}; Ext.extend(Forum.SearchView, Ext.Panel);
Ext.onReady(function(){
Ext.QuickTips.init(); var ds = new Forum.TopicStore(); var cm = new Ext.grid.ColumnModel([{ id: "topic", header: "Topic", dataIndex: "title", width: 420, renderer: Forum.Renderers.topic },{ 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: Forum.Renderers.lastPost }]); cm.defaultSortable = true; var viewport = new Ext.Viewport({ layout:"border", items:[ new Ext.BoxComponent({ // raw region:"north", el: "header", height:32 }), new Ext.tree.TreePanel({ id:"forum-tree", region:"west", title:"Forums", split:true, width: 325, minSize: 175, maxSize: 400, collapsible: true, margins:"0 0 5 5", loader: new Forum.TreeLoader(), rootVisible:false, lines:false, autoScroll:true, root: new Ext.tree.AsyncTreeNode({ text: "Forums", expanded:true }) }), new Ext.TabPanel({ id:"main-tabs", activeTab:0, region:"center", margins:"0 5 5 0", resizeTabs:true, tabWidth:150, items: { id:"main-view", layout:"border", title:"Loading...", items:[ new Ext.grid.GridPanel({ region:"center", id:"topic-grid", store: ds, cm: cm, sm:new Ext.grid.RowSelectionModel({ singleSelect:true, listeners: { selectionchange: function(sel){ var rec = sel.getSelected(); if(rec){ Ext.getCmp("preview").body.update("" + rec.get("title") + "p.body = "
Post details here."); } } } }), trackMouseOver:false, loadMask: {msg:"Loading Topics..."}, viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, ds){ if(this.showPreview){
"+record.data.excerpt+"
";return "x-grid3-row-expanded"; } return "x-grid3-row-collapsed"; } }, tbar:[ { text:"New Topic", iconCls: "new-topic", handler:function(){alert("Not implemented.");} }, "-", { pressed: true, enableToggle:true, text:"Preview Pane", tooltip: {title:"Preview Pane",text:"Show or hide the Preview Pane"}, iconCls: "preview", toggleHandler: togglePreview }, " ", { pressed: true, enableToggle:true, text:"Summary", tooltip: {title:"Post Summary",text:"View a short summary of each post in the list"}, iconCls: "summary", toggleHandler: toggleDetails } ], bbar: new Ext.PagingToolbar({ pageSize: 25, store: ds, displayInfo: true, displayMsg: "Displaying topics {0} - {1} of {2}", emptyMsg: "No topics to display" }) }), { id:"preview", region:"south", height:250, title:"View Topic", split:true, bodyStyle: "padding: 10px; font-family: Arial; font-size: 12px;" } ] } }) ] }); var tree = Ext.getCmp("forum-tree"); tree.on("append", function(tree, p, node){ if(node.id == 40){ node.select.defer(100, node); } }); var sm = tree.getSelectionModel(); sm.on("beforeselect", function(sm, node){ return node.isLeaf(); }); sm.on("selectionchange", function(sm, node){ ds.loadForum(node.id); Ext.getCmp("main-view").setTitle(node.text); });
var searchStore = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: "http://extjs.ru/forum/topics-browse-remote.php" }), reader: new Ext.data.JsonReader({ root: "topics", totalProperty: "totalCount", id: "threadid" }, [ "title", "author", {name: "lastpost", type: "date", dateFormat: "timestamp"} ]) }); // Custom rendering Template var resultTpl = new Ext.XTemplate( "<tpl for=".">","
"</tpl>" ); var search = new Ext.form.ruboBox({ store: searchStore, applyTo: "search", displayField:"title", typeAhead: false, loadingText: "Searching...", width: 200, pageSize:10, listWidth:550, hideTrigger:true, tpl: resultTpl, minChars:3, emptyText:"Quick Search", onSelect: function(record){ // override default onSelect to do redirect window.location = String.format("http://extjs.ru/forum/showthread.php?t={0}&p={1}", record.data.topicId, record.id); } }); // apply it to the exsting input element //search.applyTo("search");
function toggleDetails(btn, pressed){ var view = Ext.getCmp("topic-grid").getView(); view.showPreview = pressed; view.refresh(); } function togglePreview(btn, pressed){ var preview = Ext.getCmp("preview"); preview[pressed ? "show" : "hide"](); preview.ownerCt.doLayout(); }
}); Forum.TreeLoader = function(){
Forum.TreeLoader.superclass.constructor.call(this); this.proxy = new Ext.data.ScriptTagProxy({ url : this.dataUrl });
}; Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
dataUrl: "http://extjs.ru/forum/forums-remote.php", requestData : function(node, cb){ this.proxy.request("read", null, {}, { readRecords : function(o){ return o; } }, this.addNodes, this, {node:node, cb:cb}); }, addNodes : function(o, arg){ var node = arg.node; for(var i = 0, len = o.length; i < len; i++){ var n = this.createNode(o[i]); if(n){ node.appendChild(n); } } arg.cb(this, node); }
}); </script>
</body> </html>
</source>