javascript - Dragging windows - Stack Overflow

admin管理员组

文章数量:1393866

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

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

• javascript
• ios

Share Improve this question Follow edited Jul 5, 2018 at 13:15 Arulraj 42333 silver badges1010 bronze badges asked Jun 27, 2018 at 19:53 DevmixDevmix 1,87888 gold badges4444 silver badges8484 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +50

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'
],

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./#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./#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.

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

本文标签： javascriptDragging windowsStack Overflow