如何使 ExtJs 窗口可被正文拖动？答案

【问题标题】：How to make an ExtJs window draggable by body?如何使 ExtJs 窗口可被正文拖动？
【发布时间】：2012-08-28 10:19:58
【问题描述】：

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

header:false

但是如果我们使用header:false，那么窗口就根本不能拖动了。

因此，无论如何，是否可以使窗口可以被主体拖动？也就是说，如果 header 设置为 false 并且没有显示，那么用户也可以通过某种方式拖动窗口。

任何建议任何人。

感谢您的帮助。

PS：ExtJS 版本 4.1

【问题讨论】：

标签： extjs header window draggable extjs4.1

【解决方案1】：

您可以创建自己的窗口类来更改拖动的初始化方式，这里我定义了一个完全符合您要求的窗口类。

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']);
        //}
    }
});

【讨论】：

感谢分享代码。我试过了，但发现只要我们将 header:false 放在窗口中，拖动就会停止工作。正如问题所要求的，问题是不需要标头，因此，用户应该能够拖动没有标头的窗口，不幸的是，在您共享代码的情况下也不会发生这种情况。关于如何拖动没有标题的窗口有什么想法吗？
感谢修改代码。我试过了，但是在这样的窗口中，如果我们添加任何子项，例如文本字段，那么它将变得不可编辑。也就是说，用户无法点击它并提供值。

【解决方案2】：

这是一个非常愚蠢的绕过：

Ext.require([
    'Ext.window.Window'
]);

Ext.onReady(function(){

   Ext.create('Ext.Window', {
       closable: false,
       width: 400,
       height: 200,
       layout: 'fit'
   }).show();

});

在css中：

.x-window-header-text {
    height: 2px;
}

我知道它不完全符合您的要求，但标题为可拖动状态的文档是拖动处理程序： http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-draggable

"True 允许窗口被标题栏拖动"

希望这会有所帮助。

【讨论】：

【解决方案3】：

您是否尝试过设置 Ext.Component 的 'draggable' 配置选项？这将直接将您的 Window 设置为可拖动的，此外，请尝试使用“delegate”选项来指定组件的哪个部分将是句柄。 Here's an example from the Docs.

**它从 ExtJs 4 开始可用，所以你很好。

【讨论】：