1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default PullRefresh fix for enable/disable

    PullRefresh fix for enable/disable


    I would like to dynamically, disable and re-enable the plugin on an existing list. Is this possible?

    So far, I've discovered:
    • pullRefreshPlugin.disable() does not disable the plugin at all (appearance and behavior unchanged)
    • pullRefreshPlugin.destroy() removed the plugin from my list
    • list.setPlugins([newPullRefreshPlugin]) does not add/activate the plugin as expected
    Last edited by Bunchofstring; 8 Nov 2012 at 12:23 PM. Reason: Changed title after the Update (2nd post)

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default


    Update: After fiddling with some overrides, I figured out a way to really disable and re-enable the plugin. Please let me know if there are any concerns with this approach. Sample code is adopted from the example at http://docs.sencha.com/touch/2-0/#!/...in.PullRefresh (and you can paste the code below into the example code editor to see it in action).
    Code:
    Ext.define('Ext.plugin.PullRefreshToggleable',{
        override:'Ext.plugin.PullRefresh',
        //Hide/show the visual component based on if the plugin is disabled/enabled
        disable:function(){
            this.hide();
            this.callParent(arguments);
        },
        enable:function(){
            this.show();
            this.callParent(arguments);
        },
        //Only let handlers do their thing if the plugin is enabled
        onScrollChange:function(){
            if(!this.isDisabled()){
                this.callParent(arguments);
            }
        },
        onBounceTop:function(){
            if(!this.isDisabled()){
                this.callParent(arguments);
            }
        },
        onScrollerDragEnd:function(){
            if(!this.isDisabled()){
                this.callParent(arguments);
            }
        }
    });
    
    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'img', 'text'],
        data: [
            {
                name: 'edpsencer',
                img: 'http://a2.twimg.com/profile_images/1175591906/Ed-presenting-cropped_reasonably_small.jpg',
                text: 'Read about Sencha Touch'
            },{
                name: 'rdougan',
                img:  'http://a0.twimg.com/profile_images/1261180556/171265_10150129602722922_727937921_7778997_8387690_o_reasonably_small.jpg',
                text: 'Javascript development'
            },{
                name: 'philogb',
                img: 'https://si0.twimg.com/profile_images/1249073521/ng_normal.png',
                text: '@ikarienator nice burritos!'
            }
        ]
    });
    
    var foo = Ext.create('Ext.dataview.List', {
        fullscreen: true,
    
        store: store,
    
        plugins: [
            {
                xclass: 'Ext.plugin.PullRefresh',
                pullRefreshText: 'Pull down for more new Tweets!'
            }
        ],
    
        itemTpl: [
            '<img src="{img}" alt="{name} photo" />',
            '<div class="tweet"><b>{name}:</b> {text}</div>'
        ]
    });
    
    foo.getPlugins()[0].disable();
    
    //Demonstrates that re-enabling the plugin restores the visual component and behavior. Comment out the line below to test if disable() works as expected
    foo.getPlugins()[0].enable();