如何使ExtJs窗口可被主体拖动? [英] How to make an ExtJs window draggable by body?

问题描述

我们有一个要求，我们需要隐藏窗口的标题，为此我们正在使用

We have a requirement in which we need to hide the header of the window and for this we are using

header:false

但是如果我们使用header:false，则根本无法拖动窗口.

But if we use header:false, then window can not be dragged at all.

因此，无论如何，有没有一个窗口可以使主体拖动窗口?也就是说，如果标头设置为false并且没有显示，那么用户也可以通过某种方式拖动窗口.

Thus, is there anyway by which a window can be made draggable by body? That is, if header is set to false and is not getting displayed then also somehow user can drag the window.

任何建议任何人.

感谢您的帮助.

PS:ExtJS 4.1版

PS: ExtJS Version 4.1

推荐答案

您可以创建自己的窗口类，该窗口类更改拖动的初始化方式，在这里，我定义了一个窗口类，该窗口类可以完全满足您的要求.

You could create your own window class that changes how the dragging is initialize, here I have defined a window class that does exactly what you want.

Ext.define("MyCustomWindowClass", {
   extend: "Ext.window.Window",
   initDraggable: function() {
        var me = this,
            ddConfig;

        if (!me.header) {
            me.updateHeader(true);
        }

        /*
         * Check the header here again. If for whatever reason it wasn't created in
         * updateHeader (we were configured with header: false) then we'll just ignore the rest since the
         * header acts as the drag handle.
         */
        //if (me.header) {
            ddConfig = Ext.applyIf({
                el: me.el//,-Reimius, I commented out the next line that delegates the dragger to the header of the window
                //delegate: '#' + Ext.escapeId(me.header.id)
            }, me.draggable);

            // Add extra configs if Window is specified to be constrained
            /*if (me.constrain || me.constrainHeader) {
                ddConfig.constrain = me.constrain;
                ddConfig.constrainDelegate = me.constrainHeader;
                ddConfig.constrainTo = me.constrainTo || me.container;
            }*/

            /**
             * @property {Ext.util.ComponentDragger} dd
             * If this Window is configured {@link #cfg-draggable}, this property will contain an instance of
             * {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging
             * the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .
             *
             * This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If
             * extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or
             * {@link Ext.Function#createSequence createSequence} to augment the existing implementations.
             */
            me.dd = new Ext.util.ComponentDragger(this, ddConfig);
            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
        //}
    }
});

这篇关于如何使ExtJs窗口可被主体拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！