paging.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

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