Dragging windows

Question

I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2

Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.

       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

A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:

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

or

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

To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:

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

Answer 2

You are looking for Ext.os class. More precisely Ext.os.is method, according to the docs it has all the values you would need.

I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}

Otherwise if(Ext.os.is.iPad) {...}.

---

UPDATE Solution:

If you want to force anything across all classes in the ExtJS you would use Ext.override.

So the solution would be to put at the beginning of the app this code:

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

FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work. https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.

But this solution has 1 drawback:

If the target is a class declared using Ext.define, the override method of that class is called

Which means this solution don't work when you use Ext.create('Ext.Window',{})

Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:

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

I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.

Answer 3

Why you are not using draggable: false in window config Here is some code in FIDDLE

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

    win.show();