How to make an ExtJs window draggable by body?

0
votes

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

header:false

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

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.

Any suggestions anyone.

Thanks for the help.

PS: ExtJS Version 4.1

3
extjsheaderwindowdraggableextjs4.1

3 Answers

2
votes

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

This is a really dumbed down bypass:

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

Ext.onReady(function(){

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

});

And in the css:

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

I know its not exactly what you asked for, but the Docs for draggable state the header is the dragging handler: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-draggable

"True to allow the window to be dragged by the header bar"

Hope this helps somewhat.

0
votes

Have you tried setting 'draggable' config option of the Ext.Component? This will directly set your Window as draggable, also, try using the 'delegate' option to specify which part of your component will be the handle. Here's an example from the Docs.

**It's available since ExtJs 4, so you're good.