Sencha动态设置Ext.Panel 'scrollable‘属性

Question

强制性地说：“我已经研究这个问题一整天了，都要跳窗了，等等。”

我正在开发Sencha Touch 2应用程序。在当前视图中，当用户在元素内单击和拖动时，我想禁用滚动功能。这个元素是他们在其中绘图的画布，所以很明显，我不希望在他们绘图时页面上下移动！

请耐心听我说，我对Sencha还很陌生。

以下是代码的基本概要：

    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

    },
});

下面是我尝试过的方法：

我认为这个不起作用，因为我混合了jquery和extjs……它在正确的时间触发，但显示以下错误：

未捕获TypeError:对象没有方法“”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
            });
}

然后我尝试了一下，但是基于控制台错误(TypeError: Cannot read property 'fn‘of undefined)，我认为我使用get()的方式有问题。

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

我对其他黑客攻击持开放态度(在“鼠标按下”等过程中设置所有东西的静态位置的某种方法)如果他们满足了基本需求。在一天结束的时候，我只需要当用户在#canvasSignature元素中拖动手指时，屏幕不会移动。

提前谢谢你！

Answer 1

您可能只想引用视图本身，而不是使用返回DOM元素而不是Sencha组件的Ext.get()，因为视图本身将具有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
    });
}

您还可以重写Panel的initialize()方法，而不需要附加侦听器。

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