如图:源代码为修改的http://extjs.org.cn/extjs/examples/grid/paging.html的代码:<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';  Ext.onReady(function(){   
  
    // create the Data Store   
    var store = new Ext.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 Ext.data.ScriptTagProxy({   
            url: '../action.php?action=getLogs'  
        }),   
  
        // create reader that reads the Topic records   
        reader: new Ext.data.JsonReader({   
            root: 'topics',   
            totalProperty: 'totalCount',   
            id: 'threadid',   
            fields: [   
                'id', 'module', 'description',    
                {name: 'time', mapping: 'time', type: 'date', dateFormat: 'timestamp'}
            ]   
        }),   
  
        // turn on remote sorting   
        remoteSort: true  
    });   
    store.setDefaultSort('id', 'desc');   
  
    // pluggable renders   
    //function renderTopic(value, p, record){   
    //    return String.format(   
    //            '<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>',   
    //            value, record.data.forumtitle, record.id, record.data.forumid);   
    //}   
    function renderTime(value, p, r){   
        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['time']);   
    }   
  
    // the column model has information about grid columns   
    // dataIndex maps the column to the specific data field in   
    // the data store   
    var cm = new Ext.grid.ColumnModel([{   
           id: 'id',     // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })   
           header: "序号",   
           dataIndex: 'id',   
           width: 70
        },{   
           header: "模块",   
           dataIndex: 'module',   
           width: 150  
        },{   
           header: "内容",   
           align : 'center',
           sortable : false,  
           dataIndex: 'description',   
           width: 700,   
           align: 'right'  
        },{   
           id: 'time',   
           header: "日期",   
           dataIndex: 'time',   
           width: 120,   
           renderer: renderTime    
        }]);   
  
    // by default columns are sortable   
    cm.defaultSortable = true;   
  
    var grid = new Ext.grid.GridPanel({   
        el:'topic-grid',   
        width:1050,   
        height:640,   
        title:'',   
        store: store,   
        cm: cm,   
        trackMouseOver:false,   
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),   
        //loadMask: true,   
        viewConfig: {   
            forceFit:true,   
            enableRowBody:true,   
            showPreview:true,   
            getRowClass : function(record, rowIndex, p, store){   
                if(this.showPreview){   
                    p.body = '<p>'+record.data.excerpt+'</p>';   
                    return 'x-grid3-row-expanded';   
                }   
                return 'x-grid3-row-collapsed';   
            }   
        },   
        bbar: new Ext.PagingToolbar({   
            pageSize: 25,   
            store: store,   
            displayInfo: true,   
            displayMsg: 'Displaying topics {0} - {1} of {2}',   
            emptyMsg: "No topics to display",   
            items:[   
                '-', {   
                pressed: true,   
                enableToggle:true,   
                text: 'Show Preview',   
                cls: 'x-btn-text-icon details',   
                toggleHandler: toggleDetails   
            }]   
        })   
    });   
  
    // render it   
    grid.render();   
  
    // trigger the data store load   
    store.load({params:{start:0, limit:25}});   
  
    function toggleDetails(btn, pressed){   
        var view = grid.getView();   
        view.showPreview = pressed;   
        view.refresh();   
    }   
  setTimeout(function() {
Ext.get('loading-mask').fadeOut({
remove : true
              });
        }, 300);
  loadend();
});  
</script>