How to make window draggable by body?

[netemp]

We have a window where header is not provided, that is, window has header:false.

But we need to make this window draggable.

Thus, how could a window be made draggable by its body?

Thanks for any help in advance.

PS: ExtJs version 4.1

[mixo]

i guess you can take some css rules applied to header cmp and make your own custom css class for draggable element.

[Zdeno]

Hmm try override initDraggable function on Ext.window.Window.

Function initDraggable uses the header element as the delegate so you need use window body to delegate. Question is if you can catch click on window when you put there any item. Eg. panel will overlap window and you will click on panel element. In that case you need use panel as the delegate.

Source code of initDraggable function:

/** * @private
 * Override Component.initDraggable.
 * Window uses the header element as the delegate.
 */
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,
            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']);
    }
}