PDA

View Full Version : Calling methods within an extended control



grimbouk
28 Sep 2011, 7:31 AM
Hi all,

I'm trying to work out how to call a method from within an extended control. Can someone help me work out what I'm doing wrong?

Here's a snippet of the extended control:-

Ext.ns('Ext.ux');
Ext.ux.EnhancedCarousel = Ext.extend(Ext.util.Observable, {
swipeAction: function () {
// Do Something
}
});
Ext.preg('enhancedCarousel', Ext.ux.EnhancedCarousel);


And here's how I'm defining the control and trying to call the method when an action occurs:-

myapp.views.myview = new Ext.Carousel({
id: 'myview',
xtype: 'carousel',
flex: 1,
plugins: [{ ptype: 'enhancedCarousel' }],
listeners: {
afterrender: function (c) {
c.el.on('swipe', function (e) {
// The following line doesn't work
Ext.getCmp('myview').swipeAction();
});
}
},
items : [
{html: 'item1'},
{html: 'item2'}
]
});


I know the swipe action is registered, but I can't seem to work out how to refer back to the Carousel object and call the method.

any ideas?

thanks

NickT
28 Sep 2011, 9:40 AM
When you build a plugin, you need to implement an init function. Essentially, you will use this to attach function delegation to the control that you are adding the plugin to... (using the .on function from observable). The other common thing to do in a plugin is interceptors when you want to override behavior of an event...



Ext.ns('Ext.ux');Ext.ux.EnhancedCarousel = Ext.extend(Ext.util.Observable, {
init: function(carousel) {
// Initialize here
this.carousel = carousel;
carousel.on('afterrender', this.onCarouselAfterRender, this);
},
swipeAction: function () {
// Do Something
console.log('swiped');
},
onCarouselAfterRender: function () {
var me = this;
this.carousel.el.on('swipe', function (e) {
// The following line doesn't work
me.swipeAction();
});
}
});
Ext.preg('enhancedCarousel', Ext.ux.EnhancedCarousel);


so, now, you just drop in your carousel and add in the plugin ...


{ id: 'myview',
xtype: 'carousel',
flex: 1,
plugins: [
{ ptype: 'enhancedCarousel' }
],
items : [
{html: 'item1'},
{html: 'item2'}
]
}

grimbouk
29 Sep 2011, 2:13 AM
Hi Nick,

thanks for the reply. I hadn't thought of approaching the problem that way, it makes complete sense to me now and I've got it working.

thanks