1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.onReady(function(){ |
---|
10 | |
---|
11 | // create the Data Store |
---|
12 | var store = new Ext.data.JsonStore({ |
---|
13 | root: 'topics', |
---|
14 | totalProperty: 'totalCount', |
---|
15 | idProperty: 'threadid', |
---|
16 | remoteSort: true, |
---|
17 | |
---|
18 | fields: [ |
---|
19 | 'title', 'forumtitle', 'forumid', 'author', |
---|
20 | {name: 'replycount', type: 'int'}, |
---|
21 | {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, |
---|
22 | 'lastposter', 'excerpt' |
---|
23 | ], |
---|
24 | |
---|
25 | // load using script tags for cross domain, if the data in on the same domain as |
---|
26 | // this page, an HttpProxy would be better |
---|
27 | proxy: new Ext.data.ScriptTagProxy({ |
---|
28 | url: 'http://extjs.com/forum/topics-browse-remote.php' |
---|
29 | }) |
---|
30 | }); |
---|
31 | store.setDefaultSort('lastpost', 'desc'); |
---|
32 | |
---|
33 | |
---|
34 | // pluggable renders |
---|
35 | function renderTopic(value, p, record){ |
---|
36 | return String.format( |
---|
37 | '<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>', |
---|
38 | value, record.data.forumtitle, record.id, record.data.forumid); |
---|
39 | } |
---|
40 | function renderLast(value, p, r){ |
---|
41 | return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); |
---|
42 | } |
---|
43 | |
---|
44 | var pagingBar = new Ext.PagingToolbar({ |
---|
45 | pageSize: 25, |
---|
46 | store: store, |
---|
47 | displayInfo: true, |
---|
48 | displayMsg: 'Displaying topics {0} - {1} of {2}', |
---|
49 | emptyMsg: "No topics to display", |
---|
50 | |
---|
51 | items:[ |
---|
52 | '-', { |
---|
53 | pressed: true, |
---|
54 | enableToggle:true, |
---|
55 | text: 'Show Preview', |
---|
56 | cls: 'x-btn-text-icon details', |
---|
57 | toggleHandler: function(btn, pressed){ |
---|
58 | var view = grid.getView(); |
---|
59 | view.showPreview = pressed; |
---|
60 | view.refresh(); |
---|
61 | } |
---|
62 | }] |
---|
63 | }); |
---|
64 | |
---|
65 | var grid = new Ext.grid.GridPanel({ |
---|
66 | el:'topic-grid', |
---|
67 | width:700, |
---|
68 | height:500, |
---|
69 | title:'ExtJS.com - Browse Forums', |
---|
70 | store: store, |
---|
71 | trackMouseOver:false, |
---|
72 | disableSelection:true, |
---|
73 | loadMask: true, |
---|
74 | |
---|
75 | // grid columns |
---|
76 | columns:[{ |
---|
77 | id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) |
---|
78 | header: "Topic", |
---|
79 | dataIndex: 'title', |
---|
80 | width: 420, |
---|
81 | renderer: renderTopic, |
---|
82 | sortable: true |
---|
83 | },{ |
---|
84 | header: "Author", |
---|
85 | dataIndex: 'author', |
---|
86 | width: 100, |
---|
87 | hidden: true, |
---|
88 | sortable: true |
---|
89 | },{ |
---|
90 | header: "Replies", |
---|
91 | dataIndex: 'replycount', |
---|
92 | width: 70, |
---|
93 | align: 'right', |
---|
94 | sortable: true |
---|
95 | },{ |
---|
96 | id: 'last', |
---|
97 | header: "Last Post", |
---|
98 | dataIndex: 'lastpost', |
---|
99 | width: 150, |
---|
100 | renderer: renderLast, |
---|
101 | sortable: true |
---|
102 | }], |
---|
103 | |
---|
104 | // customize view config |
---|
105 | viewConfig: { |
---|
106 | forceFit:true, |
---|
107 | enableRowBody:true, |
---|
108 | showPreview:true, |
---|
109 | getRowClass : function(record, rowIndex, p, store){ |
---|
110 | if(this.showPreview){ |
---|
111 | p.body = '<p>'+record.data.excerpt+'</p>'; |
---|
112 | return 'x-grid3-row-expanded'; |
---|
113 | } |
---|
114 | return 'x-grid3-row-collapsed'; |
---|
115 | } |
---|
116 | }, |
---|
117 | |
---|
118 | // paging bar on the bottom |
---|
119 | bbar: pagingBar |
---|
120 | }); |
---|
121 | |
---|
122 | // render it |
---|
123 | grid.render(); |
---|
124 | |
---|
125 | // trigger the data store load |
---|
126 | store.load({params:{start:0, limit:25}}); |
---|
127 | }); |
---|
128 | |
---|
129 | |
---|
130 | |
---|
131 | /** |
---|
132 | * @class Ext.ux.SliderTip |
---|
133 | * @extends Ext.Tip |
---|
134 | * Simple plugin for using an Ext.Tip with a slider to show the slider value |
---|
135 | */ |
---|
136 | Ext.ux.SliderTip = Ext.extend(Ext.Tip, { |
---|
137 | minWidth: 10, |
---|
138 | offsets : [0, -10], |
---|
139 | init : function(slider){ |
---|
140 | slider.on('dragstart', this.onSlide, this); |
---|
141 | slider.on('drag', this.onSlide, this); |
---|
142 | slider.on('dragend', this.hide, this); |
---|
143 | slider.on('destroy', this.destroy, this); |
---|
144 | }, |
---|
145 | |
---|
146 | onSlide : function(slider){ |
---|
147 | this.show(); |
---|
148 | this.body.update(this.getText(slider)); |
---|
149 | this.doAutoWidth(); |
---|
150 | this.el.alignTo(slider.thumb, 'b-t?', this.offsets); |
---|
151 | }, |
---|
152 | |
---|
153 | getText : function(slider){ |
---|
154 | return slider.getValue(); |
---|
155 | } |
---|
156 | }); |
---|