extjs 3 paging store

by Durtto

HTML

<!doctype html>
<html>
<head>
<title>MessageBox</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script> 
<link href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
  <div id="grid-example" />
  
<script type="text/javascript">
  
  
    Ext.onReady(function() {
    
        // 顯示 tips 相關的資訊
        Ext.QuickTips.init();

    
        // 資料來源
        var myData = [
            ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
            ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
            ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
            ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
            ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
            ['AT&T Inc.', 31.61, - 0.48, - 1.54, '9/1 12:00am'],
            ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am']
        ];
    


    


        var store = new Ext.ux.data.PagingSimpleStore({
            fields: [{
                name: 'company'
            }, {
                name: 'price',
                type: 'float'
            }, {
                name: 'change',
                type: 'float'
            }, {
                name: 'pctChange',
                type: 'float'
            }, {
                name: 'lastChange',
                type: 'date',
                dateFormat: 'n/j h:ia'
            }],
            proxy:new Ext.data.MemoryProxy(myData)
        });
        
        store.load({params:{start:0,limit:2}});

        
        var pagingToolbar = new Ext.ux.PagingToolbar({
            pageSize: store.lastOptions.params.limit,
            store: store
            //items: [stopPaging,startPaging]
        });
    
        
        // 這邊傳入的 val 為當資料被顯示時,該欄位的資料
        function change(val) {
            if...

JavaScript

/*
 * PagingStore for Ext 3.2 - v0.5
 */
Ext.ns('Ext.ux.data');
Ext.ux.data.PagingStore = Ext.extend(Ext.data.Store, {
    add: function (records) {
        records = [].concat(records);
        if (records.length < 1) {
            return;
        }
        for (var i = 0, len = records.length; i < len; i++) {
            records[i].join(this);
        }
        var index = this.data.length;
        this.data.addAll(records);
        // *** add ***
        if (this.allData) {
            this.allData.addAll(records);
        }
        // *** end ***
        if (this.snapshot) {
            this.snapshot.addAll(records);
        }
        // *** add ***
        this.totalLength += records.length;
        // *** end ***
        this.fireEvent('add', this, records, index);
    },
    remove: function (record) {
        if (Ext.isArray(record)) {
            Ext.each(record, function (r) {
                this.remove(r);
            }, this);
            return;
        }
        // *** add ***
        if (this != record.store) {
            return;
        }
        record.join(null);
        // *** end ***
        var index = this.data.indexOf(record);
        if (index > -1) {
            // record.join(null);
            this.data.removeAt(index);
        }
        if (this.pruneModifiedRecords) {
            this.modified.remove(record);
        }
        // *** add ***
        if (this.allData) {
            this.allData.remove(record);
        }
        // *** end ***
        if (this.snapshot) {
            this.snapshot.remove(record);
        }
        // *** add ***
        this.totalLength--;
        // *** end ***
        if (index > -1) {
            this.fireEvent('remove', this, record, index);
        }
    },
    removeAll: function (silent) {
        // *** add ***
        var items = [].concat((this.snapshot || this.allData || this.data).items);
        // *** end ***
        // var items = [];
        // this.each(function (rec) {
        //    ...