// Auto generated file - created by app.Builder.js- do not edit directly (at present!)
-Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
-
-Roo.onReady(function(){
-
-
- // create the Data Store
- var ds = new Roo.data.Store({
- // 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 Roo.data.ScriptTagProxy({
- url: 'http://extjs.com/forum/topics-remote.php'
- }),
-
- // create reader that reads the Topic records
- reader: new Roo.data.JsonReader({
- root: 'topics',
- totalProperty: 'totalCount',
- id: 'post_id'
- }, [
- {name: 'title', mapping: 'topic_title'},
- {name: 'author', mapping: 'author'},
- {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
- {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
- {name: 'excerpt', mapping: 'post_text'}
- ]),
-
- // turn on remote sorting
- remoteSort: true
- });
-
-
- // pluggable renders
- function renderTopic(value, p, record){
- return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
- }
- function renderTopicPlain(value){
- return String.format('<b><i>{0}</i></b>', value);
- }
- function renderLast(value, p, r){
- return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
- }
- function renderLastPlain(value){
- return value.dateFormat('M j, Y, g:i a');
- }
-
- // the column model has information about grid columns
- // dataIndex maps the column to the specific data field in
- // the data store
- var cm = new Roo.grid.ColumnModel([{
- id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
- header: "Topic",
- dataIndex: 'title',
- width: 490,
- renderer: renderTopic,
- css: 'white-space:normal;'
- },{
- header: "Author",
- dataIndex: 'author',
- width: 100,
- hidden: true
- },{
- id: 'last',
- header: "Last Post",
- dataIndex: 'lastPost',
- width: 150,
- renderer: renderLast
- }]);
-
-
-
- // create the editor grid
- var grid = new Roo.ViewPanel('view', {
- ds: ds,
- cm: cm,
- selModel: new Roo.grid.RowSelectionModel({singleSelect:true}),
- enableColLock:false,
- loadMask: true
- });
-
- // make the grid resizable, do before render for better performance
- var rz = new Roo.Resizable('view', {
- wrap:true,
- minHeight:100,
- pinned:true,
- handles: 's'
- });
- rz.on('resize', grid.autoSize, grid);
-
- // render it
- grid.render();
-
- var gridFoot = grid.getView().getFooterPanel(true);
-
- // add a paging toolbar to the grid's footer
- var paging = new Roo.PagingToolbar(gridFoot, ds, {
- pageSize: 25,
- displayInfo: true,
- displayMsg: 'Displaying topics {0} - {1} of {2}',
- emptyMsg: "No topics to display"
- });
- // add the detailed view button
- paging.add('-', {
- pressed: true,
- enableToggle:true,
- text: 'Detailed View',
- cls: 'x-btn-text-icon details',
- toggleHandler: toggleDetails
- });
-
- // trigger the data store load
- ds.load({params:{start:0, limit:25}});
-
- function toggleDetails(btn, pressed){
- cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
- cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
- grid.getView().refresh();
- }
-});
\ No newline at end of file
+ViewPanel
\ No newline at end of file