拖动窗口

Question

我对此做了一些研究,但仍然无法找到一个好的解决方案.我在ExtJS 4.1中编写了我的应用程序,当我在iPod上运行它时默认禁用拖动功能(这是我想要的),但如果我在ExtJS 6.2中编写相同的应用程序,所有窗口都可以拖动,这会导致可见性问题该应用程序.话虽如此,有没有人知道如何在使用平板电脑(iPod,iPad等)时禁用窗口拖动？我正在使用ExtJS 6.2

这是我的工作代码,适用于单个窗口,但我想要一个通用的解决方案,将阻止所有窗口被拖动.

       var win = Ext.create('Ext.Window', {
            title: "My Window",
            width: 500,
            modal: true,
            layout: 'fit',
            items: form,
            buttons: [{
                text: 'Close',
                handler: function() {
                    win.hide();
                }
            }]
        });

        win.show();

        if(Ext.os.deviceType === 'Tablet') {
            win.dd.disable();
        }

Answer 1

你正在寻找Ext.os课程.更精确的Ext.os.is方法,根据文档,它具有您需要的所有值.

我不确定你为什么要只阻止iPad而不是一般的表格.如果你想要平板电脑,你可以使用if(Ext.os.deviceType === 'Tablet') {...}

否则if(Ext.os.is.iPad) {...}.

更新解决方案:

如果你想强制使用ExtJS中所有类的任何东西Ext.override.

因此,解决方案是在应用程序的开头放置此代码:

if (Ext.os.deviceType === 'Tablet') {
    Ext.override('Ext.Window', {
        privates: {
            initDraggable: function(){}
        }
    })
}

仅供参考您可以查看Ext.Window源代码.我不得不重写此方法,默认值draggable: false不起作用. https://fiddle.sencha.com/#view/editor&fiddle/2iqi
要测试它,只需按F12切换到表格模式.

但这个解决方案有一个缺点:

如果目标是使用Ext.define声明的类,则调用该类的override方法

这意味着此解决方案在您使用时不起作用 Ext.create('Ext.Window',{})

解决方法是定义我们自己的Ext.Window类,而不是在你使用时在应用程序内部Ext.create('Ext.Window'使用Ext.create('Fiddle.view.MyWindow',,当我们拥有自己的函数时,我们不需要使用override,但可以直接放入类定义中,如下所示:

Ext.define('Fiddle.view.MyWindow', {
    extend: 'Ext.Window',
    alias: 'widget.mywindow',

    draggable: (function(){
        if (Ext.os.deviceType === 'Tablet') {
            return false;
        } else {
            return true;
        }
    })()

});

https://fiddle.sencha.com/#view/editor&fiddle/2iqj

Ext.create('Ext.Window'如果您仍然坚持使用它,我不知道如何覆盖它.一种解决方案是重写Ext.create或简单编辑框架源本身,但我强烈反对.

Answer 2

"全局解决方案"听起来像是要使用覆盖将全局其他答案之一应用于您的应用程序:

Ext.define('MyAppName.override.Window', {
    override: 'Ext.window.Window',
    initComponent: function() {
        this.callParent(arguments);
        if(Ext.os.deviceType === 'Tablet') {
            this.dd.disable();
        }
    }
})

要么

Ext.define('MyAppName.override.Window', {
    override: 'Ext.window.Window',
    initComponent: function() {
        if(Ext.os.deviceType === 'Tablet') {
            this.draggable = false;
        }
        this.callParent(arguments);
    }
})

要使覆盖工作,请将其放入文件app/override/Window.js并在以下位置添加对requires数组的引用Application.js:

requires: [
    'MyAppName.override.Window'
],