Extjs TreeStore+pagingToolbar 分页
Extjs很强大，但也很庞大，还有一些地方不满足一些需求，变态需求就另说了。
在4中Tree不带有分页，为了满足需求，只能扩展Ext的组件。
仔细看TreeStore中源码，可以对比着Store中的源码，其实TreeStore中只是缺少了分页参数，以及对这些参数的逻辑和封装。我们只需要传入参数，加入分页逻辑，并封装起来。
思路有了，就按着需求写。
/**
* Extjs4.1 TreeStore 分页
*
* @作者：徐盛
* @日期：2012-10-23
* @用法：
* Ext.create('APP.plugin.TreeStore', {
* model: 'myModel',
* storeId: 'MyTreeModel',
* proxy: {
* type: 'ajax',
* url: 'url.do',
* reader: {
* type: 'json',
* root: 'myTree',
* totalProperty: 'totalProperty' // 一定需要这个参数接受后台返回的总条数
* }
* },
* root: {
* id: 0,
* text: 'root',
* expanded: true
* }
* })
*
* 其余都一样，主要是totalProperty，这个返回总条数
*
* @说明：
* 目前只能实现root节点下的分页。
* 在原Extjs4.1 TreeStore中加入的分页所需参数。
* 如不满足需求，需自行调试加入方法。
* 联系QQ：78264486
*
*/
Ext.define('APP.plugin.TreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.MyTreeStore',
/**
* 每页显示条数
*
*/
pageSize: undefined,
/**
* 当前页 默认为第一页
*
*/
currentPage: 1,
purgePageCount: 5,
defaultPageSize: 25,
/**
* 构造函数
*
*/
constructor: function(config) {
var me = this,
root,
fields,
defaultRoot,
data,
proxy;
config = Ext.apply({}, config);
/**
* @event prefetch
* Fires whenever records have been prefetched
* @param {Ext.data.Store} this
* @param {Ext.data.Model[]} records An array of records.
* @param {Boolean} successful True if the operation was successful.
* @param {Ext.data.Operation} operation The associated operation
*/
data = config.data || me.data;
/**
* @property {Ext.util.MixedCollection} data
* The MixedCollection that holds this store's local cache of records.
*/
me.data = new Ext.util.MixedCollection(false, Ext.data.Store.recordIdFn);
if (data) {
me.inlineData = data;
delete config.data;
}
/**
* If we have no fields declare for the store, add some defaults.
* These will be ignored if a model is explicitly specified.
*/
fields = config.fields || me.fields;
if (!fields) {
config.fields = [
{name: 'text', type: 'string'}
];
defaultRoot = config.defaultRootProperty || me.defaultRootProperty;
if (defaultRoot !== me.defaultRootProperty) {
config.fields.push({
name: defaultRoot,
type: 'auto',
defaultValue: null,
persist: false
});
}
}
me.callParent([config]);
/**
* @property {Ext.data.Store.PageMap} pageMap
* Internal PageMap instance.
* @private
*/
me.pageMap = new me.PageMap({
pageSize: me.pageSize,
maxSize: me.purgePageCount,
listeners: {
// Whenever PageMap gets cleared, it means we re no longer interested in
// any outstanding page prefetches, so cancel tham all
clear: me.cancelAllPrefetches,
scope: me
}
});
me.pageRequests = {};
me.sortOnLoad = false;
me.filterOnLoad = false;
proxy = me.proxy;
data = me.inlineData;
if (data) {
if (proxy instanceof Ext.data.proxy.Memory) {
proxy.data = data;
me.read();
} else {
me.add.apply(me, [data]);
}
me.sort();
delete me.inlineData;
} else if (me.autoLoad) {
Ext.defer(me.load, 10, me, [ typeof me.autoLoad === 'object' ? me.autoLoad : undefined ]);
// Remove the defer call, we may need reinstate this at some point, but currently it's not obvious why it's here.
// this.load(typeof this.autoLoad == 'object' ? this.autoLoad : undefined);
}
// We create our data tree.
me.tree = new Ext.data.Tree();
me.relayEvents(me.tree, [
/**
* @event append
* @inheritdoc Ext.data.Tree#append
*/
"append",
/**
* @event remove
* @inheritdoc Ext.data.Tree#remove
*/
"remove",
/**
* @event move
* @inheritdoc Ext.data.Tree#move
*/
"move",
/**
* @event insert
* @inheritdoc Ext.data.Tree#insert
*/
"insert",
/**
* @event beforeappend
* @inheritdoc Ext.data.Tree#beforeappend
*/
"beforeappend",
/**
* @event beforeremove
* @inheritdoc Ext.data.Tree#beforeremove
*/
"beforeremove",
/**
* @event beforemove
* @inheritdoc Ext.data.Tree#beforemove
*/
"beforemove",
/**
* @event beforeinsert
* @inheritdoc Ext.data.Tree#beforeinsert
*/
"beforeinsert",
/**
* @event expand
* @inheritdoc Ext.data.Tree#expand
*/
"expand",
/**
* @event collapse
* @inheritdoc Ext.data.Tree#collapse
*/
"collapse",
/**
* @event beforeexpand
* @inheritdoc Ext.data.Tree#beforeexpand
*/
"beforeexpand",
/**
* @event beforecollapse
* @inheritdoc Ext.data.Tree#beforecollapse
*/
"beforecollapse",
/**
* @event sort
* @inheritdoc Ext.data.Tree#sort
*/
"sort",
/**
* @event rootchange
* @inheritdoc Ext.data.Tree#rootchange
*/
"rootchange"
]);
me.tree.on({
scope: me,
remove: me.onNodeRemove,
// this event must follow the relay to beforeitemexpand to allow users to
// cancel the expand:
beforeexpand: me.onBeforeNodeExpand,
beforecollapse: me.onBeforeNodeCollapse,
append: me.onNodeAdded,
insert: me.onNodeAdded,
sort: me.onNodeSort
});
me.onBeforeSort();
root = me.root;
if (root) {
delete me.root;
me.setRootNode(root);
}
//<deprecated since=0.99>
if (Ext.isDefined(me.nodeParameter)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.data.TreeStore: nodeParameter has been deprecated. Please use nodeParam instead.');
}
me.nodeParam = me.nodeParameter;
delete me.nodeParameter;
}
//</deprecated>
},
/**
* Loads the Store using its configured {@link #proxy}.
* @param {Object} options (Optional) config object. This is passed into the {@link Ext.data.Operation Operation}
* object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function.
* The options can also contain a node, which indicates which node is to be loaded. If not specified, it will
* default to the root node.
*/
load: function(options) {
options = options || {};
options.params = options.params || {};
var me = this,
node = options.node || me.tree.getRootNode();
options.page = options.page || me.currentPage;
options.start = (options.start !== undefined) ? options.start : (options.page - 1) * me.pageSize;
options.limit = options.limit || me.pageSize;
// If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
// create one for them.
if (!node) {
node = me.setRootNode({
expanded: true
}, true);
}
// Assign the ID of the Operation so that a REST proxy can create the correct URL
options.id = node.getId();
if (me.clearOnLoad) {
if(me.clearRemovedOnLoad) {
// clear from the removed array any nodes that were descendants of the node being reloaded so that they do not get saved on next sync.
me.clearRemoved(node);
}
// temporarily remove the onNodeRemove event listener so that when removeAll is called, the removed nodes do not get added to the removed array
me.tree.un('remove', me.onNodeRemove, me);
// remove all the nodes
node.removeAll(false);
// reattach the onNodeRemove listener
me.tree.on('remove', me.onNodeRemove, me);
}
Ext.applyIf(options, {
node: node
});
options.params[me.nodeParam] = node ? node.getId() : 'root';
if (node) {
node.set('loading', true);
}
return me.callParent([options]);
},
// inherit docs
onProxyLoad: function(operation) {
var me = this,
successful = operation.wasSuccessful(),
records = operation.getRecords(),
node = operation.node,
resultSet = operation.getResultSet();
if (resultSet) {
me.totalCount = resultSet.total;
}
me.mycount = resultSet.count;
me.loading = false;
node.set('loading', false);
if (successful) {
if (!me.clearOnLoad) {
records = me.cleanRecords(node, records);
}
records = me.fillNode(node, records);
}
// The load event has an extra node parameter
// (differing from the load event described in AbstractStore)
/**
* @event load
* Fires whenever the store reads data from a remote data source.
* @param {Ext.data.TreeStore} this
* @param {Ext.data.NodeInterface} node The node that was loaded.
* @param {Ext.data.Model[]} records An array of records.
* @param {Boolean} successful True if the operation was successful.
*/
// deprecate read?
me.fireEvent('read', me, operation.node, records, successful);
me.fireEvent('load', me, operation.node, records, successful);
//this is a callback that would have been passed to the 'read' function and is optional
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
},
/**
* 获取总条数
*
*/
getTotalCount: function() {
return this.totalCount || 0;
},
/**
* 获取当前data中条目数
*
*/
getCount: function () {
return this.mycount || 0;
},
/**
* Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal
* load operation, passing in calculated 'start' and 'limit' params
* @param {Number} page The number of the page to load
* @param {Object} options See options for {@link #method-load}
*/
loadPage: function(page, options) {
var me = this;
me.currentPage = page;
// Copy options into a new object so as not to mutate passed in objects
options = Ext.apply({
page: page,
start: (page - 1) * me.pageSize,
limit: me.pageSize,
addRecords: !me.clearOnPageLoad
}, options);
if (me.buffered) {
return me.loadToPrefetch(options);
}
me.read(options);
},
/**
* Loads the next 'page' in the current data set
* @param {Object} options See options for {@link #method-load}
*/
nextPage: function(options) {
this.loadPage(this.currentPage + 1, options);
},
/**
* Loads the previous 'page' in the current data set
* @param {Object} options See options for {@link #method-load}
*/
previousPage: function(options) {
this.loadPage(this.currentPage - 1, options);
},
/**
* @private
* Cancels all pending prefetch requests.
*
* This is called when the page map is cleared.
*
* Any requests which still make it through will be for the previous page map generation
* (generation is incremented upon clear), and so will be rejected upon arrival.
*/
cancelAllPrefetches: function() {
var me = this,
reqs = me.pageRequests,
req,
page;
// If any requests return, we no longer respond to them.
if (me.pageMap.events.pageadded) {
me.pageMap.events.pageadded.clearListeners();
}
// Cancel all outstanding requests
for (page in reqs) {
if (reqs.hasOwnProperty(page)) {
req = reqs[page];
delete reqs[page];
delete req.callback;
}
}
},
/**
* 根据树JSON 中id 获取对应NODE
*
* 此方法会调用Ext.data.Tree中的getNodeById
*
*/
getNodeById: function (id) {
return this.tree.getNodeById(id);
}
}, function() {
var proto = this.prototype;
proto.indexSorter = new Ext.util.Sorter({
sorterFn: proto.sortByIndex
});
/**
* @class Ext.data.Store.PageMap
* @extends Ext.util.LruCache
* Private class for use by only Store when configured `buffered: true`.
* @private
*/
this.prototype.PageMap = new Ext.Class({
extend: 'Ext.util.LruCache',
// Maintain a generation counter, so that the Store can reject incoming pages destined for the previous generation
clear: function(initial) {
this.generation = (this.generation ||0) + 1;
this.callParent(arguments);
},
getPageFromRecordIndex: this.prototype.getPageFromRecordIndex,
addPage: function(page, records) {
this.add(page, records);
this.fireEvent('pageAdded', page, records);
},
getPage: function(page) {
return this.get(page);
},
hasRange: function(start, end) {
var page = this.getPageFromRecordIndex(start),
endPage = this.getPageFromRecordIndex(end);
for (; page <= endPage; page++) {
if (!this.hasPage(page)) {
return false;
}
}
return true;
},
hasPage: function(page) {
// We must use this.get to trigger an access so that the page which is checked for presence is not eligible for pruning
return !!this.get(page);
},
getRange: function(start, end) {
if (!this.hasRange(start, end)) {
Ext.Error.raise('PageMap asked for range which it does not have');
}
var me = this,
startPage = me.getPageFromRecordIndex(start),
endPage = me.getPageFromRecordIndex(end),
dataStart = (startPage - 1) * me.pageSize,
dataEnd = (endPage * me.pageSize) - 1,
page = startPage,
result = [],
sliceBegin, sliceEnd, doSlice,
i = 0, len;
for (; page <= endPage; page++) {
// First and last pages will need slicing to cut into the actual wanted records
if (page == startPage) {
sliceBegin = start - dataStart;
doSlice = true;
} else {
sliceBegin = 0;
doSlice = false;
}
if (page == endPage) {
sliceEnd = me.pageSize - (dataEnd - end);
doSlice = true;
}
// First and last pages will need slicing
if (doSlice) {
Ext.Array.push(result, Ext.Array.slice(me.getPage(page), sliceBegin, sliceEnd));
} else {
Ext.Array.push(result, me.getPage(page));
}
}
// Inject the dataset ordinal position into the record as the index
for (len = result.length; i < len; i++) {
result[i].index = start++;
}
return result;
}
});
});