2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.onReady(function(){
\r
11 // create the Data Store
\r
12 var store = new Ext.data.JsonStore({
\r
14 totalProperty: 'totalCount',
\r
15 idProperty: 'threadid',
\r
19 'title', 'forumtitle', 'forumid', 'author',
\r
20 {name: 'replycount', type: 'int'},
\r
21 {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
\r
22 'lastposter', 'excerpt'
\r
25 // load using script tags for cross domain, if the data in on the same domain as
\r
26 // this page, an HttpProxy would be better
\r
27 proxy: new Ext.data.ScriptTagProxy({
\r
28 url: 'http://extjs.com/forum/topics-browse-remote.php'
\r
31 store.setDefaultSort('lastpost', 'desc');
\r
34 // pluggable renders
\r
35 function renderTopic(value, p, record){
\r
36 return String.format(
\r
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>',
\r
38 value, record.data.forumtitle, record.id, record.data.forumid);
\r
40 function renderLast(value, p, r){
\r
41 return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
\r
44 var pagingBar = new Ext.PagingToolbar({
\r
48 displayMsg: 'Displaying topics {0} - {1} of {2}',
\r
49 emptyMsg: "No topics to display",
\r
55 text: 'Show Preview',
\r
56 cls: 'x-btn-text-icon details',
\r
57 toggleHandler: function(btn, pressed){
\r
58 var view = grid.getView();
\r
59 view.showPreview = pressed;
\r
65 var grid = new Ext.grid.GridPanel({
\r
69 title:'ExtJS.com - Browse Forums',
\r
71 trackMouseOver:false,
\r
72 disableSelection:true,
\r
77 id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
\r
81 renderer: renderTopic,
\r
85 dataIndex: 'author',
\r
91 dataIndex: 'replycount',
\r
97 header: "Last Post",
\r
98 dataIndex: 'lastpost',
\r
100 renderer: renderLast,
\r
104 // customize view config
\r
107 enableRowBody:true,
\r
109 getRowClass : function(record, rowIndex, p, store){
\r
110 if(this.showPreview){
\r
111 p.body = '<p>'+record.data.excerpt+'</p>';
\r
112 return 'x-grid3-row-expanded';
\r
114 return 'x-grid3-row-collapsed';
\r
118 // paging bar on the bottom
\r
125 // trigger the data store load
\r
126 store.load({params:{start:0, limit:25}});
\r
132 * @class Ext.ux.SliderTip
\r
134 * Simple plugin for using an Ext.Tip with a slider to show the slider value
\r
136 Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
\r
138 offsets : [0, -10],
\r
139 init : function(slider){
\r
140 slider.on('dragstart', this.onSlide, this);
\r
141 slider.on('drag', this.onSlide, this);
\r
142 slider.on('dragend', this.hide, this);
\r
143 slider.on('destroy', this.destroy, this);
\r
146 onSlide : function(slider){
\r
148 this.body.update(this.getText(slider));
\r
149 this.doAutoWidth();
\r
150 this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
\r
153 getText : function(slider){
\r
154 return slider.getValue();
\r