PDA

View Full Version : PullRefresh fix for enable/disable



Bunchofstring
8 Nov 2012, 6:52 AM
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

Bunchofstring
8 Nov 2012, 10:36 AM
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/#!/api/Ext.plugin.PullRefresh (and you can paste the code below into the example code editor to see it in action).

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();