JavaScript DHTML/Ext JS/Forum
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(
"{0}
",
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") + "
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){
p.body = ""+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=".">",
"{title} by {author}
",
"</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>
<input type="text" id="search" />
</body> </html>
</source>
