4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
15 Roo.onReady(function(){
17 // create the Data Store
18 var ds = new Roo.data.Store({
19 // load using script tags for cross domain, if the data in on the same domain as
20 // this page, an HttpProxy would be better
21 proxy: new Roo.data.ScriptTagProxy({
22 url: 'http://extjs.com/forum/topics-remote.php'
25 // create reader that reads the Topic records
26 reader: new Roo.data.JsonReader({
28 totalProperty: 'totalCount',
31 {name: 'title', mapping: 'topic_title'},
32 {name: 'author', mapping: 'author'},
33 {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
34 {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
35 {name: 'excerpt', mapping: 'post_text'}
38 // turn on remote sorting
44 function renderTopic(value, p, record){
45 return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
47 function renderTopicPlain(value){
48 return String.format('<b><i>{0}</i></b>', value);
50 function renderLast(value, p, r){
51 return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
53 function renderLastPlain(value){
54 return value.dateFormat('M j, Y, g:i a');
57 // the column model has information about grid columns
58 // dataIndex maps the column to the specific data field in
60 var cm = new Roo.grid.ColumnModel([{
61 id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
65 renderer: renderTopic,
66 css: 'white-space:normal;'
75 dataIndex: 'lastPost',
82 // create the editor grid
83 var grid = new Roo.grid.Grid('topic-grid', {
86 selModel: new Roo.grid.RowSelectionModel({singleSelect:true}),
91 // make the grid resizable, do before render for better performance
92 var rz = new Roo.Resizable('topic-grid', {
98 rz.on('resize', grid.autoSize, grid);
103 var gridFoot = grid.getView().getFooterPanel(true);
105 // add a paging toolbar to the grid's footer
106 var paging = new Roo.PagingToolbar(gridFoot, ds, {
109 displayMsg: 'Displaying topics {0} - {1} of {2}',
110 emptyMsg: "No topics to display"
112 // add the detailed view button
116 text: 'Detailed View',
117 cls: 'x-btn-text-icon details',
118 toggleHandler: toggleDetails
121 // trigger the data store load
122 ds.load({params:{start:0, limit:25}});
124 function toggleDetails(btn, pressed){
125 cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
126 cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
127 grid.getView().refresh();