135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
Ext.onReady(function(){
|
|
|
|
// create the Data Store
|
|
var store = new Ext.data.JsonStore({
|
|
root: 'topics',
|
|
totalProperty: 'totalCount',
|
|
idProperty: 'threadid',
|
|
remoteSort: true,
|
|
|
|
fields: [
|
|
'title', 'forumtitle', 'forumid', 'author',
|
|
{name: 'replycount', type: 'int'},
|
|
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
|
|
'lastposter', 'excerpt'
|
|
],
|
|
|
|
// load using script tags for cross domain, if the data in on the same domain as
|
|
// this page, an HttpProxy would be better
|
|
proxy: new Ext.data.ScriptTagProxy({
|
|
url: 'http://extjs.com/forum/topics-browse-remote.php'
|
|
})
|
|
});
|
|
store.setDefaultSort('lastpost', 'desc');
|
|
|
|
|
|
// pluggable renders
|
|
function renderTopic(value, p, record){
|
|
return String.format(
|
|
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
|
|
value, record.data.forumtitle, record.id, record.data.forumid);
|
|
}
|
|
function renderLast(value, p, r){
|
|
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
|
|
}
|
|
|
|
var grid = new Ext.grid.GridPanel({
|
|
width:700,
|
|
height:500,
|
|
title:'ExtJS.com - Browse Forums',
|
|
store: store,
|
|
trackMouseOver:false,
|
|
disableSelection:true,
|
|
loadMask: true,
|
|
|
|
// grid columns
|
|
columns:[{
|
|
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
|
|
header: "Topic",
|
|
dataIndex: 'title',
|
|
width: 420,
|
|
renderer: renderTopic,
|
|
sortable: true
|
|
},{
|
|
header: "Author",
|
|
dataIndex: 'author',
|
|
width: 100,
|
|
hidden: true,
|
|
sortable: true
|
|
},{
|
|
header: "Replies",
|
|
dataIndex: 'replycount',
|
|
width: 70,
|
|
align: 'right',
|
|
sortable: true
|
|
},{
|
|
id: 'last',
|
|
header: "Last Post",
|
|
dataIndex: 'lastpost',
|
|
width: 150,
|
|
renderer: renderLast,
|
|
sortable: true
|
|
}],
|
|
|
|
// customize view config
|
|
viewConfig: {
|
|
forceFit:true,
|
|
enableRowBody:true,
|
|
showPreview:true,
|
|
getRowClass : function(record, rowIndex, p, store){
|
|
if(this.showPreview){
|
|
p.body = '<p>'+record.data.excerpt+'</p>';
|
|
return 'x-grid3-row-expanded';
|
|
}
|
|
return 'x-grid3-row-collapsed';
|
|
}
|
|
},
|
|
|
|
// paging bar on the bottom
|
|
bbar: new Ext.PagingToolbar({
|
|
pageSize: 25,
|
|
store: store,
|
|
displayInfo: true,
|
|
displayMsg: 'Displaying topics {0} - {1} of {2}',
|
|
emptyMsg: "No topics to display",
|
|
items:[
|
|
'-', {
|
|
pressed: true,
|
|
enableToggle:true,
|
|
text: 'Show Preview',
|
|
cls: 'x-btn-text-icon details',
|
|
toggleHandler: function(btn, pressed){
|
|
var view = grid.getView();
|
|
view.showPreview = pressed;
|
|
view.refresh();
|
|
}
|
|
}]
|
|
})
|
|
});
|
|
|
|
// render it
|
|
grid.render('topic-grid');
|
|
|
|
// trigger the data store load
|
|
store.load({params:{start:0, limit:25}});
|
|
});
|