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
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">Ext.onReady(function(){
10 // create the Data Store
11 var store = new Ext.data.JsonStore({
13 totalProperty: 'totalCount',
14 idProperty: 'threadid',
18 'title', 'forumtitle', 'forumid', 'author',
19 {name: 'replycount', type: 'int'},
20 {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
21 'lastposter', 'excerpt'
24 // load using script tags for cross domain, if the data in on the same domain as
25 // this page, an HttpProxy would be better
26 proxy: new Ext.data.ScriptTagProxy({
27 url: 'http://extjs.com/forum/topics-browse-remote.php'
30 store.setDefaultSort('lastpost', 'desc');
34 function renderTopic(value, p, record){
36 '<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>',
37 value, record.data.forumtitle, record.id, record.data.forumid);
39 function renderLast(value, p, r){
40 return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
43 var grid = new Ext.grid.GridPanel({
46 title:'ExtJS.com - Browse Forums',
49 disableSelection:true,
54 id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
58 renderer: renderTopic,
68 dataIndex: 'replycount',
75 dataIndex: 'lastpost',
81 // customize view config
86 getRowClass : function(record, rowIndex, p, store){
88 p.body = '<p>'+record.data.excerpt+'</p>';
89 return 'x-grid3-row-expanded';
91 return 'x-grid3-row-collapsed';
95 // paging bar on the bottom
96 bbar: new Ext.PagingToolbar({
100 displayMsg: 'Displaying topics {0} - {1} of {2}',
101 emptyMsg: "No topics to display",
106 text: 'Show Preview',
107 cls: 'x-btn-text-icon details',
108 toggleHandler: function(btn, pressed){
109 var view = grid.getView();
110 view.showPreview = pressed;
118 grid.render('topic-grid');
120 // trigger the data store load
121 store.load({params:{start:0, limit:25}});