Sencha set Ext.Panel 'scrollable' property dynamically

Question

Obligatory 'I've been working on this problem all day, about to jump out of a window, etc.'

I am working on a Sencha Touch 2 application. In the current view I would like to disable the ability to scroll while the person is clicking and dragging within an element. This element is a canvas in which they are drawing, so obviously I don't want the page moving up and down while they draw!

Bear with me, I am pretty new to Sencha.

Here is the basic outline of the code:

    Ext.define('App.view.Canvas', {
    extend: "Ext.Panel",
    id: "panel",
    alias: "widget.canvas",
    requires: ['Ext.ux.Fileup'],

    config: {
        styleHtmlContent: true,
        scrollable: true,
        tpl:"<!-- a bunch of html -->"+
                "<div id='canvasDiv'></div>"+
            "<!-- more html -->",

        items: [{
            xtype: "toolbar",
            title: "Canvas",
            docked: "top",
        }],

        listeners: [{
            some listeners
        }, {
            event: "show",
            fn: "onShow",
        }],
    },

    onShow: function() {

        // where I am trying to change the scrollable bit

    },
});

Now here are the things I have tried:

I think this one doesn't work because I am mixing jquery and extjs... It fires at the right time, but displays this error:

Uncaught TypeError: Object [object Object] has no method 'setScrollable'

onShow: function () {
// #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv
$("#canvasSignature").mousedown(function() {
                Ext.get('panel').setScrollable(false); //attempting to reference panel
            }).bind('mouseup mouseleave', function() {
                Ext.get('panel').setScrollable(true); //attempting to reference panel
            });
}

Then I tried this, but based on the console error (TypeError: Cannot read property 'fn' of undefined) I think there is a problem with the way I am using get()

onShow: function () {
    Ext.get("canvasSignature").on({
                    dragstart: Ext.get('panel').setScrollable(false),
                    dragend: Ext.get('panel').setScrollable(true),
                });
},

I am open to other hacks (some way to set a static position of everything during 'mousedown,' etc.) if they fulfill the basic need. At the end of the day I just need the screen to not move while the user is dragging their finger within the #canvasSignature element.

Thank you in advance!

Answer 1

Rather than using Ext.get(), which returns a DOM element instead of a Sencha component, you likely want to just reference the view itself, which would have setScrollable().

onShow: function () {
    var me = this;
    // #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv
    $("#canvasSignature").mousedown(function() {
        me.setScrollable(false); //attempting to reference panel
    }).bind('mouseup mouseleave', function() {
        me.setScrollable(true); //attempting to reference panel
    });
}

You could also override the Panel's initialize() method rather than needing to attach a listener.

initialize: function () {
    this.callParent(arguments);

    var me = this;
    // #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv
    $("#canvasSignature").mousedown(function() {
        me.setScrollable(false); //attempting to reference panel
    }).bind('mouseup mouseleave', function() {
        me.setScrollable(true); //attempting to reference panel
    });
}