1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    Answers
    10
    netemp is on a distinguished road

      0  

    Default Unanswered: How to make window draggable by body?

    Unanswered: How to make window draggable by body?


    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

  2. #2
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    47
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    438
    Vote Rating
    20
    Answers
    7
    Zdeno will become famous soon enough Zdeno will become famous soon enough

      0  

    Default


    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:

    Code:
    /** * @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']);
        }
    }

Thread Participants: 2

Tags for this Thread