开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
paging.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：4k
源码类别：

中间件编程

开发平台：

JavaScript

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