1. #21
    Touch Premium Member
    Join Date
    Feb 2011
    Posts
    57
    Vote Rating
    0
    mvoss is on a distinguished road

      0  

    Default Thank you

    Thank you


    Hi,

    thank you for continuing to work on this but this is implemented in Sencha Touch now. Have a look at the documentation:

    http://dev.sencha.com/deploy/touch/docs/

    search for ListPagingPlugin.

    Regards,
    Markus

  2. #22
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Yeah, look at the dates.

  3. #23
    Sencha User
    Join Date
    Oct 2011
    Posts
    55
    Vote Rating
    0
    justinKohactive is on a distinguished road

      0  

    Default Ported for 2.x

    Ported for 2.x


    https://github.com/j-mcnally/Sencha2-PullToRefresh

    Based on your great plugin

  4. #24
    Sencha User
    Join Date
    May 2007
    Posts
    74
    Vote Rating
    0
    marceloverdijk is on a distinguished road

      0  

    Default


    Will this plugin be available in Sencha Touch 2.0? I can't see it preview3.

  5. #25
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Check src/plugin/PullRefresh.js Looking at it right now.

  6. #26

  7. #27
    Sencha User
    Join Date
    Mar 2010
    Posts
    3
    Vote Rating
    0
    openxtiger is on a distinguished road

      0  

    Default


    Quote Originally Posted by SimonFlack View Post
    This plugin was just what I needed. Although I needed it for paging.

    Here is my modified version.

    Plugin:

    Code:
    mobile.plugins.ListPullPager = ...
    That great! but had some bugs,i modify and extend it!

    Usage:

    Code:
    plugins: ["listpager"]
    Code:
    plugins: ["listpullpager"]
    Code:
    plugins: [{ptype:"listpullpager",isAutoButtons:false}]
    Plugin:
    Code:
    Ext.plugins.ListPaging = Ext.extend(Ext.util.Observable, {
        isAutoButtons:true,
        init:function (list) {
            this.store = list.store;
    
    
            list.load = this.load;
            if (this.isAutoButtons) {
                list.prevBtn = this.prevBtn = new Ext.Button({text:"1", handler:this.onPrevTap, ui:"back", scope:this});
                list.nextBtn = this.nextBtn = new Ext.Button({text:"1", handler:this.onNextTap, ui:"forward", scope:this});
                list.reloadBtn = this.reloadBtn = new Ext.Button({iconMask:true,ui:'plain',iconCls:'refresh',handler:this.onRefreshAction, scope:this});
            }
            this.store.on("load", this.handleStoreLoad, this);
        },
        onPrevTap:function () {
            this.loadPage(-1);
        },
        onNextTap:function () {
            this.loadPage(1);
        },
        onRefreshAction:function() {
            this.loadPage(0);
        },
        handlePrevPage:function () {
            this.loadPage(-1);
        },
        handleNextPage:function () {
            this.loadPage(1);
        },
        reload:function () {
            this.loadPage(0);
        },
        load:function() {
            var store = this.store;
            store.currentPage = 1;
            store.baseParams["start"] = 0;
            store.baseParams["limit"] = this.store.pageSize;
            store.load({params:this.store.baseParams});
        },
        loadPage:function (cpage) {
            var store = this.store;
            var totalNum = this.getTotalRecs();
            var numPages = Math.ceil(totalNum / store.pageSize);
            var page = this.store.currentPage + cpage;
            if (page < 1) {
                page = 1;
            }
            if (page > numPages) {
                page = numPages;
            }
            store.currentPage = page;
            store.baseParams["start"] = (page - 1) * this.store.pageSize;
            store.baseParams["limit"] = this.store.pageSize;
            store.load({params:this.store.baseParams});
        },
        getTotalPage:function () {
            var store = this.store;
            var totalNum = this.getTotalRecs();
            return Math.ceil(totalNum / store.pageSize);
        },
        getTotalRecs:function () {
            var store = this.store;
            var proxy = store.getProxy();
            var reader = proxy.getReader();
            return reader.getTotal(reader.rawData);
        },
        handleStoreLoadBtn:function (store, pageMatch) {
            var currentPage = store.currentPage;
            if (currentPage > 1) {
                this.prevBtn.setText((currentPage - 1) + "/" + pageMatch);
                this.prevBtn.enable();
            } else {
                this.prevBtn.setText(pageMatch == 0 ? 0 : 1);
                this.prevBtn.disable();
            }
            if (currentPage < pageMatch - 1) {
                this.nextBtn.setText((currentPage + 1) + "/" + pageMatch);
                this.nextBtn.enable();
            } else {
                this.nextBtn.setText(pageMatch);
                this.nextBtn.disable();
            }
        },
        handleStoreLoad:function (store, recs, success) {
            if (success) {
                var totalNum = this.getTotalRecs();
                var numPages = Math.ceil(totalNum / store.pageSize);
                if (store.currentPage > numPages) store.currentPage = numPages;
                if (store.currentPage < 1) store.currentPage = 1;
                if (this.isAutoButtons) {
                    this.handleStoreLoadBtn(store, numPages);
                }
            }
        }
    });
    
    
    Ext.preg('listpager', Ext.plugins.ListPaging);
    Code:
    Ext.apply(Ext.anims, {
        rotate: new Ext.Anim({
            autoClear: false,
            out: false,
            before: function(el) {
                var d = '';
                if (this.dir == 'ccw') {
                    d = '-';
                }
    
    
                this.from = {
                    '-webkit-transform': 'rotate(' + d + '' + this.fromAngle + 'deg)'
                };
    
    
                this.to = {
                    '-webkit-transform': 'rotate(' + d + '' + this.toAngle + 'deg)'
                };
    
    
            }
        })
    });
    Code:
    Ext.plugins.ListPullPager = Ext.extend(Ext.plugins.ListPaging, {
        langPullPrevious: 'Pull down to load {0} of {1},total {2}',
        pullPreviousText: 'Pull down to load previous...',
        langReleasePrevious: 'Release to load previous...',
        langPullNext: 'Pull up to load page {0} of {1} ,total {2}',
        pullNextText: 'Pull up to load next...',
        langReleaseNext: 'Release to load next...',
        langLoading: 'Loading...',
    
    
        loading: false,
        // private
        init: function(list) {
            this.list = list;
            this.lastUpdated = new Date();
            list.loadingText = undefined;
            list.on('render', this.initPullHandler, this);
            Ext.plugins.ListPullPager.superclass.init.apply(this, arguments);
        },
        // private
        initPullHandler: function() {
            //Previous
            this.previousTpl = new Ext.XTemplate(
                '<div class="x-list-pullprevpage">',
                '<div class="x-list-pullprevpage-arrow"></div>',
                '<div class="x-list-pullrefresh-wrap">',
                '<h3 class="x-list-pullrefresh-message">{m}</h3>',
                '<div class="x-list-pullrefresh-updated">Last Updated: <span>{l:date("m/d/Y h:iA")}</span></div>',
                '</div>',
                '</div>'
            );
            this.previousEl = this.previousTpl.insertBefore(this.list.scroller.el,
                {m:this.pullPreviousText,l:this.lastUpdated}, true);
            this.previousEl.hide();
    
    
            Ext.Element.cssTranslate(this.previousEl, {x:0, y:-75});
    
    
            //Next
            this.nextTpl = new Ext.XTemplate(
                '<div class="x-list-pullnextpage">',
                '<div class="x-list-pullnextpage-arrow"></div>',
                '<div class="x-list-pullrefresh-wrap">',
                '<h3 class="x-list-pullrefresh-message">{m}</h3>',
                '<div class="x-list-pullrefresh-updated">Last Updated: <span>{l:date("m/d/Y h:iA")}</span></div>',
                '</div>',
                '</div>'
            );
            this.nextEl = this.nextTpl.insertAfter(this.list.scroller.el,
                {m:this.pullNextText,l:this.lastUpdated}, true);
            this.nextEl.hide();
            Ext.Element.cssTranslate(this.nextEl, {x:0, y:-90});
    
    
    
    
            this.list.scroller.on('offsetchange', this.handleOffsettChange, this);
        },
    
    
        handleOffsettChange: function(scroller, offset) {
            if (scroller.direction === 'vertical' && !this.loading) {
    
    
                var heightOfList = scroller.size.height - scroller.containerBox.height;
    
    
                if (offset.y > 0) {
                    //console.log('up:'+offset);
                    this.handlePrevious(scroller, offset, heightOfList);
                }
    
    
                if (offset.y < (heightOfList * -1)) {
                    //console.log('down:'+offset);
                    this.handleNext(scroller, offset, heightOfList);
                }
            }
        },
    
    
        //private
        handlePrevious: function(scroller, offset, heightOfList) {
            if (scroller.direction === 'vertical' && !this.loading) {
                if (offset) {
                    Ext.Element.cssTranslate(this.previousEl, {x:0, y:offset.y - 76});
    
    
                    if (offset.y > 90) {
                        // state 1
                        if (this.state !== 1) {
                            this.prevState = this.state;
                            this.state = 1;
                            this.previousTpl.overwrite(this.previousEl, {m:this.langReleasePrevious,l:this.lastUpdated});
                            Ext.Anim.run(this.previousEl.select('.x-list-pullprevpage-arrow').first(), 'rotate', {dir:'ccw',fromAngle:0,toAngle:180});
                        }
                    } else if (!scroller.isDragging()) {
                        // state 3
                        if (this.state !== 3) {
                            this.prevState = this.state;
                            this.state = 3;
                            this.previousEl.hide();
                            if (this.prevState == 1) {
                                this.loading = true;
                                this.lastUpdated = new Date();
                                this.loadPage(-1);
                                this.callback = this.previousComplete();
                            }
                        }
                    } else {
                        // state 2
                        if (this.state !== 2) {
                            this.prevState = this.state;
                            this.state = 2;
                            this.previousTpl.overwrite(this.previousEl, {m:this.pullPreviousText,l:this.lastUpdated});
                            this.previousEl.show();
                            if (this.prevState == 1) {
                                Ext.Anim.run(this.previousEl.select('.x-list-pullprevpage-arrow').first(), 'rotate', {dir:'cw',fromAngle:180,toAngle:0});
                            }
                        }
                    }
                }
            }
        },
        handleNext: function(scroller, offset, heightOfList) {
            if (scroller.direction === 'vertical' && !this.loading) {
                if (offset) {
                    Ext.Element.cssTranslate(this.nextEl, {x:0, y:offset.y});
    
    
                    if (offset.y < ((heightOfList + 90) * -1)) {
                        // state 1
                        if (this.state !== 1) {
                            this.nextState = this.state;
                            this.state = 1;
                            this.nextTpl.overwrite(this.nextEl, {m:this.langReleaseNext,l:this.lastUpdated});
                            Ext.Anim.run(this.nextEl.select('.x-list-pullnextpage-arrow').first(), 'rotate', {dir:'ccw',fromAngle:180,toAngle:0});
                        }
                    } else if (!scroller.isDragging()) {
                        // state 3
                        if (this.state !== 3) {
                            this.nextState = this.state;
                            this.state = 3;
                            this.nextEl.hide();
                            if (this.nextState == 1) {
                                this.loading = true;
                                this.lastUpdated = new Date();
                                this.loadPage(1);
                                this.callback = this.nextComplete();
                            }
                        }
                    } else {
                        // state 2
                        if (this.state !== 2) {
                            this.nextState = this.state;
                            this.state = 2;
                            this.nextTpl.overwrite(this.nextEl, {m:this.pullNextText,l:this.lastUpdated});
                            this.nextEl.show();
                            if (this.nextState == 1) {
                                Ext.Anim.run(this.nextEl.select('.x-list-pullnextpage-arrow').first(), 'rotate', {dir:'cw',fromAngle:0,toAngle:180});
                            }
                        }
                    }
                }
            }
        },
        //private
        previousComplete: function() {
            this.loading = false;
            this.lastUpdated = new Date();
            this.previousTpl.overwrite(this.previousEl, {m:this.pullPreviousText,l:this.lastUpdated});
        },
        nextComplete: function() {
            this.loading = false;
            this.lastUpdated = new Date();
            this.nextTpl.overwrite(this.nextEl, {m:this.pullNextText,l:this.lastUpdated});
        },
        handleStoreLoad:function (store, recs, success) {
            Ext.plugins.ListPullPager.superclass.handleStoreLoad.apply(this, arguments);
            var totalNum = this.getTotalRecs();
            var numPages = Math.ceil(totalNum / store.pageSize);
            if (store.currentPage > numPages) store.currentPage = numPages;
            if (store.currentPage < 1) store.currentPage = 1;
            var c = store.currentPage;
            this.pullPreviousText = Ext.util.Format.format(this.langPullPrevious, c > 1 ? c - 1 : 1, numPages, totalNum);
            this.pullNextText = Ext.util.Format.format(this.langPullNext, c < numPages ? c + 1 : numPages, numPages, totalNum);
            if (this.callback) {
                this.callback();
            }
    
    
        }
    });
    
    
    Ext.preg('listpullpager', Ext.plugins.ListPullPager);

    CSS

    Code:
    .x-list-pullprevpage {
        display: -webkit-box;
        display: box;
        -webkit-box-orient: horizontal;
        box-orient: horizontal;
        -webkit-box-align: center;
        box-align: center;
        -webkit-box-pack: center;
        box-pack: center;
        left: 0;
        width: 100%;
        height: 0
    }
    .x-list-pullnextpage {
        display: -webkit-box;
        display: box;
        -webkit-box-orient: horizontal;
        box-orient: horizontal;
        -webkit-box-align: center;
        box-align: center;
        -webkit-box-pack: center;
        box-pack: center;
        position: absolute;
        left: 0;
        width: 100%;
        height: 0
    }
    
    
    .x-list-pullrefresh-message {
        font-weight: bold;
        font-size: 1.0em;
        margin-bottom: 0.1em;
        text-align: center
    }
    
    
    .x-list-pullprevpage-arrow {
        width: 2.5em;
        height: 3.0em;
        -webkit-mask: center center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBHwEEFZRBU1UAAAI7SURBVGje7dq/a5NRFMbxz6ttHSym4CK4+A8UtZPugpOrqKNiETqIq2tB3EQoIgjiIhZdCoIguLu1SkGFLi6Cmz+KQ432OvQGXjRN75vcN4ltDpwpL9xvnvecc885SRFCMMy2z5DbGBRFkfr8/kzn/k55KISwBZhoRUbATYRkBasqnsGadRyYU8GiLgXHB5IkFb71WEYF7UkFx0cKtiuGw2ohhP/kqku0CRzPdO5b/KwjSSaGOUmGHlBGwNrq4IF+KzgqM/18xQdxPtO5T/FjV8TgrgOcGGXxbs7iKdzMdO4tfN2TzcLAsvgEGgmFOhfgqYRC/Q1vWoAbuKJ/y6RLCauR22UF32MJF4ckeZ/g3d8xuIRpzAwYbjmybAVrCKG8fmvgHg4PCO4LrsX4E0L4B1BU8Y7+Lzc3cQOr5ZukXZlZxaP4Tfpp98tw273ist3F6T7Bvcb1dndxJ8AGFnGkZrjPuNCKuyqAYkY/rHEn08TlmLlddTPLWIiAdfjCdnApMVi2BziTWb1XuLpTP5gKOIWXOJoJ7hPO7tRyVQGEk3ieIR6bOIeV3B31Cubj9diLz6fAVY3Bsj2OCnRjL2JJSZ5JugE8FAvrsYpwH2Ph/15poOtyqpvBeuwjU3y9my6pF0CYw69En+t27Ox1Ll609ZNWJ3/Wy1zcK2ADax3g1hJmnVoBWwPXRhu4jfiZQQPCbBvA2Ryrj5y7mXI8LubazeQEnMSH6JPDCNiaZ6ZzbreK0d9SRoAjwM72B0xIAaqN33EkAAAAAElFTkSuQmCC') no-repeat;
        -webkit-mask-size: 2em 3em;
        -webkit-transform: rotate(0deg);
        background-color: #111
    }
    
    
    .x-list-pullnextpage-arrow {
        width: 2.5em;
        height: 3.0em;
        -webkit-mask: center center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBHwEEFZRBU1UAAAI7SURBVGje7dq/a5NRFMbxz6ttHSym4CK4+A8UtZPugpOrqKNiETqIq2tB3EQoIgjiIhZdCoIguLu1SkGFLi6Cmz+KQ432OvQGXjRN75vcN4ltDpwpL9xvnvecc885SRFCMMy2z5DbGBRFkfr8/kzn/k55KISwBZhoRUbATYRkBasqnsGadRyYU8GiLgXHB5IkFb71WEYF7UkFx0cKtiuGw2ohhP/kqku0CRzPdO5b/KwjSSaGOUmGHlBGwNrq4IF+KzgqM/18xQdxPtO5T/FjV8TgrgOcGGXxbs7iKdzMdO4tfN2TzcLAsvgEGgmFOhfgqYRC/Q1vWoAbuKJ/y6RLCauR22UF32MJF4ckeZ/g3d8xuIRpzAwYbjmybAVrCKG8fmvgHg4PCO4LrsX4E0L4B1BU8Y7+Lzc3cQOr5ZukXZlZxaP4Tfpp98tw273ist3F6T7Bvcb1dndxJ8AGFnGkZrjPuNCKuyqAYkY/rHEn08TlmLlddTPLWIiAdfjCdnApMVi2BziTWb1XuLpTP5gKOIWXOJoJ7hPO7tRyVQGEk3ieIR6bOIeV3B31Cubj9diLz6fAVY3Bsj2OCnRjL2JJSZ5JugE8FAvrsYpwH2Ph/15poOtyqpvBeuwjU3y9my6pF0CYw69En+t27Ox1Ll609ZNWJ3/Wy1zcK2ADax3g1hJmnVoBWwPXRhu4jfiZQQPCbBvA2Ryrj5y7mXI8LubazeQEnMSH6JPDCNiaZ6ZzbreK0d9SRoAjwM72B0xIAaqN33EkAAAAAElFTkSuQmCC') no-repeat;
        -webkit-mask-size: 2em 3em;
        -webkit-transform: rotate(180deg);
        background-color: #111
    }

  8. #28
    Sencha User anthonyterrell's Avatar
    Join Date
    Mar 2012
    Location
    Albany, NY
    Posts
    30
    Vote Rating
    0
    anthonyterrell is on a distinguished road

      0  

    Default


    Hello Everyone,

    I'm currently attempting to apply this plugin to a list in which accesses the Twitter API. My question is, if there is a PullRefresh.js, why do we need a plugin to do this? I understand that the Sencha developers are trying to watch the build size, so does this mean they are simply adding a place holder for an optional plugin?

    I followed the Readme for the Sencha Touch 2 port of the pull to refresh plugin and am receiving this error. Wasn't sure if anyone could shed some light on what may be happening.
    Code:
    TypeError: 'undefined' is not a constructor (evaluating 'new Ext.Anim')
    Failed to load resource: The requested URL was not found on this server.
    Error: [Ext.Loader] Failed loading 'sdk/src/ux/kohactive/RefreshableList.js', please verify that the file exists
    Thanks!
    Anthony Terrell - Developer
    [twitter] - [forrst]

  9. #29
    Sencha User
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    akarsh478 is on a distinguished road

      0  

    Default


    very nice, very helpful. But can someone help me how can I use this plugin to implement the same pull to refresh for bottom of the list? Thanks in advance guys.

Similar Threads

  1. Ext.ux.touch.SwipeTabs
    By VinylFox in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 24
    Last Post: 28 Jun 2012, 1:23 AM
  2. Ext Designer for Touch
    By Frank R in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 11 Feb 2012, 12:53 PM
  3. Ext JS and Sencha Touch!
    By mcamer in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 1 Dec 2010, 10:19 AM
  4. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  5. Ext Touch Core anyone?
    By mystix in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Jun 2010, 4:52 AM

Thread Participants: 16

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."