Question

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

header:false

但是如果我们使用header：false，则根本不能拖动窗口。

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

任何人的建议。

感谢您的帮助。

PS：ExtJS版本4.1

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

Answer 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

“为真以允许窗口栏标题拖动”

希望这有所帮助。

Answer 3

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

**自从ExtJs 4开始就可以使用，所以你很好。

如何使ExtJs窗口可以被身体拖动？

3 个答案: