`
sxu
  • 浏览: 37861 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

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;

        }

    });

});

分享到:
评论

相关推荐

    dwr2+Extjs2+分页控件

    dwr2+Extjs2+分页控件

    ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库

    ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266

    ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目数据库

    ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目用到的数据库 原文地址: http://blog.csdn.net/xz2001/article/details/8716541 注:该数据库是20130411日修改后的。

    ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8

    ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8完成的后台管理项目,觉得是值得参考的实用项目 下载链接

    extjs使用pagingtoolbar时,点击下一页,出现查询结果和查询条件不的解决办法

    在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...

    extjs+php分页例子

    总之,这个"extjs+php分页例子"是一个很好的学习资源,它展示了如何利用ExtJS的GridPanel组件和PHP配合,实现高效且用户友好的分页功能。通过深入研究这个实例,开发者不仅可以掌握ExtJS和PHP的结合使用,还能了解到...

    ExtJS6.5.0+SSM表格增删改查+分页

    1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页,数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全,加载即可运行 5.VX:humingxing可随时交流

    Extjs4.2+php5.4 图书管理系统

    Extjs4.2+php5.4+mysql5.5 有数据库,一般不会轻易上传,2015年本人亲自开发,技术还是新的

    extjs4 + struct+ spring + hibernate 搭建后台

    本项目使用了`extjs4`作为前端框架,`structs2`作为MVC Web应用框架,`spring`处理业务逻辑和依赖注入,以及`hibernate`作为ORM(对象关系映射)工具,来搭建一个完整的后台系统。下面将详细介绍这四个技术及其在...

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.libs目录缺少hibernate核心jar包 2.libs目录缺少struts jar 3.WebRoot目录缺少ExtJs4.2核心类库 以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不...

    基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档

    基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档 软件技术栈 前端:ExtJs4.0(JavaScript的一个框架),大数据展示用到Echarts 后端:SpringBoot, JPA 数据库:Mysql5.7 开发环境:...

    ExtJs+WCF+LINQ实现分页Grid

    ExtJs+WCF+LINQ实现分页Grid

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    ExtJS4是一个强大的JavaScript框架,用于构建富客户端Web应用程序。这个实例结合了多个技术,包括Accordion布局、Servlet、Struts2以及JSON数据交互,以及Ext.tree.Panel组件,以创建一个功能丰富的用户界面。 ...

    SSH+ExtJs分页小例子

    在这个"SSH+ExtJs分页小例子"中,我们将探讨如何将这两种技术结合实现数据分页显示。 首先,我们来看NewsDAO.java文件。这个文件包含了两个关键方法:`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...

    Extjs+SpringMVC+MyBaits财务管控系统

    《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中,财务管控系统的构建至关重要,它能够帮助企业高效管理财务数据,提高运营效率,确保财务安全。本文将深入探讨如何利用Extjs、...

    基于 Extjs + spring + hibernate 的OA框架

    基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架

    Extjs4 + Asp.net MVC Demo

    ExtJS4 + ASP.NET MVC Demo是一个结合了前端ExtJS4框架和后端ASP.NET MVC架构的应用示例,展示了如何在Web开发中实现数据操作的增删改查功能,并且利用了ExtJS4的MVC模式来提高代码的组织性和可维护性。这个Demo还...

    Extjs+Spring+Hibernate实现分页

    本项目“Extjs+Spring+Hibernate实现分页”结合了三种强大的技术,以构建一个高效、灵活的数据分页系统。下面将详细介绍这三个技术以及它们在分页中的应用。 1. **ExtJS**:ExtJS是一个JavaScript库,专门用于构建...

    Extjs tree+grid+form+panel 使用实例

    Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例

Global site tag (gtag.js) - Google Analytics