Extjs6 让treepanel能用pagingtoolbar分页

时间：2017-03-09 18:25:38 收藏：0 阅读：1094

不理解为什么ext开发者考虑实现了treegrid的数据展现形式,却忽略了这样的展现像grid本身一样是有分页需求的.

起初面对这样的需求我去到sencha官方论坛去搜索答案,找到了问类似问题的人,然而后面开发团队人员明确给出答案treepanel是不支持分页的.

然后我就不得不去翻看源码,以下是我认为有助于解决这个问题的源码文件列表:

Ext.toolbar.Paging
Ext.data.TreeStore
Ext.data.Store
Ext.tree.Panel

很自然的会想到去看看grid的分页工具条是怎么实现的,所以我先浏览了Ext.toolbar.Paging 的源码,

通过粗略的阅读你会发现PagingToolbar 的实现和grid本身并没多大关系,基本都是直接和Ext.data.Store来进行互动的,这很容易理解嘛,毕竟grid负责的是展示数据,store才是负责持有处理数据

但是这里我不理解的是既然和grid没什么关系,也就是说和是tree还是grid并没有什么区别,问题在于store不同,grid使用的是Ext.data.Store而treepanel使用的是Ext.data.TreeStore,

技术分享

由上图可知TreeStore是继承自Store的,按理说应该是支持pagingtoolbar的,问题究竟在哪里呢?看来需要对照看一下TreeStore覆盖了Store的哪些属性方法导致了这个问题,

我选择了从pagingtoolbar的源码中对store的操作作为切入点,

/**
     * @private
     */
    getPageData: function() {
        var store = this.store,
            totalCount = store.getTotalCount(),//!!!!!!!!!!!!!!!!!!这里!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            pageCount = Math.ceil(totalCount / store.pageSize),
            toRecord = Math.min(store.currentPage * store.pageSize, totalCount);
       
        return {
            total : totalCount,
            currentPage : store.currentPage,
            pageCount: Ext.Number.isFinite(pageCount) ? pageCount : 1,
            fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
            toRecord: toRecord || totalCount
        };
    },

看到代码中的:

totalCount = store.getTotalCount()

所以我去找到两种store的源码中的对应getTotalCount()方法:

首先是Store:

技术分享

由图可知Store的此方法继承自Ext.data.ProxyStore,并附其源码如下:

getTotalCount: function() {
        return this.totalCount || 0;
    },

然后是TreeStore的此方法,源码如下:

getTotalCount: function() {
        return this.getCount();
    },

到这里就看到Store和TreeStore的不同了,Store通过getTotalCount()方法得到的是存在store里的(我猜测应该是记录的后端传输数据中totalProperty的值,后面验证也确实如此,有兴趣可以自己去尝试)数据的‘总‘数量,这里的总数意味的是数据库中的总,

而TreeStore这里就变了味道,变成了getCount(),彻底成为了这次数据传输收到的数据条目总数.(同样有兴趣可以去沿着问道找到接下来执行的源码,这里不再展开).

所以到这里问题在于TreeStore不接收处理totalProperty,就不知道收到数据和数据库中存在数据条数的对应关系,也就无从分页了,

问题的原因找到了就很好解决了,以下文字叙述一下我的解决思路,有问题可以回复问:

首先要让TreeStore获取并持有总数,所以要看看Store是如何获取到的,相关源码如下

onProxyLoad: function(operation) {
        var me = this,
            resultSet = operation.getResultSet(),
            records = operation.getRecords(),
            successful = operation.wasSuccessful();
 
        if (me.destroyed) {
            return;
        }
 
        if (resultSet) {
            me.totalCount = resultSet.getTotal();//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!这里!!!!!!!!!!!!!!!!!!!!!!!!!!!
        }
 
        if (successful) {
            records = me.processAssociation(records);
            me.loadRecords(records, operation.getAddRecords() ? {
                addRecords: true
            } : undefined);
        } else {
            me.loading = false;
        }
 
        if (me.hasListeners.load) {
            me.fireEvent(‘load‘, me, records, successful, operation);
        }
        me.callObservers(‘AfterLoad‘, [records, successful, operation]);
    },

me.totalCount = resultSet.getTotal();看到这一行就明白了吧?我们可以在TreeStore中相同方法中这样取得并保存总数,但建议不要存在me.totalCount,因为Tree中的total的意思比较复杂,怕对其他逻辑产生影响,我存在了me.zlfTotal中,然后pagingtoolbar直接调用store.zlfTotal即可获取总数了.


到这里问题基本上已经解决了,可是试了一下还是不行,发现是PageSize没有正常获取.查看TreeStore源码中的config.pageSize如下:

/**
         * @cfg {Number} pageSize 
         * @hide
         */
        pageSize: null // Not valid for TreeStore. Paging parameters must not be passed.

ext开发者为了不让你用分页工具栏还把它覆盖成空值了你敢信?
把它改为你想要的值即可~

到了这里你会发现要调整的东西真的很少,所以我很不明白为什么ext官方不让tree支持分页,难道有什么不利的影响吗?如果有人知道请回复告诉我,感激不尽!~

原文：http://www.cnblogs.com/DragonfLyZ/p/6526812.html

Extjs6 让treepanel能用pagingtoolbar分页

Ext.toolbar.Paging

Ext.data.TreeStore

Ext.data.Store

Ext.tree.Panel