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) {
// ...