1. #141
    Sencha User
    Join Date
    Feb 2008
    Posts
    23
    Vote Rating
    0
    almerelc is on a distinguished road

      0  

    Default


    Anyone mentioned that when a window is DD form labelwidth is changed, and that tbar buttons are moved to a different spott in the bar?

    My window has paddings and form also... could that harm the window?

    greets

    [EDIT]

    Never mind after the fix a few post-pages back ( pasting "this.getEl().removeClass('x-panel-animated');" a few lines down as described ) it works allmost perfect in 3.x ( accept for the z-index bug ). But hey.... i dont care

  2. #142
    Sencha User
    Join Date
    Mar 2009
    Location
    Dallas, TX
    Posts
    18
    Vote Rating
    2
    darkwolfe is on a distinguished road

      0  

    Post


    Great plugin. I find myself using it everywhere an extra popup window or where i would've normally used a border layout. I noticed, when using the desktop, that on some windows, if the drawer is hidden and the window is moved, the contents of the drawer would show up on the left side of the document. i fixed this issue by commenting out the line that would align the drawer to the document body if the drawer was hidden in the setAlignAndShow function. Perhaps there is a reason why the drawer would need to be aligned if it's not being shown, but i can't think of a reason to do anything to it if you can't see it.

  3. #143
    Ext User dudecool's Avatar
    Join Date
    Nov 2007
    Location
    Bangalore, Karnataka, India
    Posts
    26
    Vote Rating
    0
    dudecool is on a distinguished road

      0  

    Exclamation


    Hi, Once the drawer is loaded how do i make the whole(parent window+drawer) thing center to the screen? currently i am using 3.1.1 and am unable to drag the parent window when i drag the window it comes back the initial location any idea what might be causing this? does the new beta version supports extjs 3.2?
    Regards,
    Jayaveer.B
    http://gallery.jayaveer.com/

  4. #144
    Ext User dudecool's Avatar
    Join Date
    Nov 2007
    Location
    Bangalore, Karnataka, India
    Posts
    26
    Vote Rating
    0
    dudecool is on a distinguished road

      0  

    Default


    the drag problem is solved by using the code given by "Peter88" still any idea on how to center the window with drawer?
    Regards,
    Jayaveer.B
    http://gallery.jayaveer.com/

  5. #145
    Ext User
    Join Date
    Feb 2010
    Location
    Charlottesville, VA, USA
    Posts
    33
    Vote Rating
    0
    Boxcopter is on a distinguished road

      0  

    Default


    Thanks! This might fit exactly what I need. Excellent job!

  6. #146
    Ext User
    Join Date
    Oct 2007
    Posts
    15
    Vote Rating
    0
    juljupy is on a distinguished road

      0  

    Default think about createGhost?

    think about createGhost?


    what about createGhost method to implement, when dragging the parent window it also shows drawer's ghost like www.kohibe.com sidepanel, i'd be cool.

  7. #147
    Sencha User b091's Avatar
    Join Date
    Jun 2008
    Location
    Gdansk, Poland
    Posts
    5
    Vote Rating
    0
    b091 is on a distinguished road

      0  

    Default


    After upgrading Extjs from 3.0 to 3.2.1 the plugin crush with an error:

    PHP Code:

    this
    .el is undefined
           this
    .el.addClass('x-panel-animated');          

    Ext.ux.plugins.WindowDrawer.js (line 173
    It looks like the plugin is trying to add class to element wich has not been rendered yet.
    I tried adding forceLayout:true, but it don't change anything

  8. #148
    Sencha User b091's Avatar
    Join Date
    Jun 2008
    Location
    Gdansk, Poland
    Posts
    5
    Vote Rating
    0
    b091 is on a distinguished road

      0  

    Default


    Solved.

    to make it work with 3.2.1 you need to add one line inside init()
    PHP Code:
    this.render(this.ownerCtthis.ownerCt.getEl() : Ext.getBody()); 

    Complete plugin code:
    Code:
    /*
        Author       : Jay Garcia
        Site         : http://tdg-i.com
        Contact Info : jgarcia@tdg-i.com
        Purpose      : Window Drawers for Ext 2.x Ext.Window class, which emulates OS X behaviors
        Contributors : Mystix, http://extjs.com/forum/member.php?u=1459
                        Hendricd, http://extjs.com/forum/member.php?u=8730
    
        Warranty     : none
        Price        : free
        Version      : 1.0 Beta 1
        Date         : 11/23/2008
    */
    
    // Need to override the Window DnD to allow events to fire.
    Ext.override(Ext.Window.DD, {
        // private - used for dragging
        startDrag : function() {
            var w = this.win;
            w.fireEvent('ghost', []);
            this.proxy = w.ghost();
            if (w.constrain !== false) {
                var so = w.el.shadowOffset;
                this.constrainTo(w.container, {right: so, left: so, bottom: so});
            } else if (w.constrainHeader !== false) {
                var s = this.proxy.getSize();
                this.constrainTo(w.container, {right: -(s.width - this.headerOffsets[0]), bottom: -(s.height - this.headerOffsets[1])});
            }
        }
    });
    
    
    // Need to override the Window class to allow events to fire for front and back movement.
    Ext.override(Ext.Window, {
        setZIndex : function(index) {
            var newZIndex = ++index;
    
            if (this.modal) {
                this.mask.setStyle("z-index", index);
            }
    
            this.el.setZIndex(newZIndex);
            index += 5;
    
            if (this.resizer) {
                this.resizer.proxy.setStyle("z-index", ++index);
            }
            if (newZIndex > this.lastZIndex) {
                this.fireEvent('tofront', this);
            } else {
                this.fireEvent('toback', this);
            }
            this.lastZIndex = index;
        }
    });
    
    Ext.ns('Ext.ux.plugins');
    
    // Drawer Base Class
    Ext.ux.plugins.WindowDrawer = Ext.extend(Ext.Window, {
        closable : false,
        resizable : false,
    
        show : function(skipAnim) {
            if (this.hidden && this.fireEvent("beforeshow", this) !== false) {
                this.hidden = false;
                this.onBeforeShow();
                this.afterShow(!!skipAnim);
            }
        },
    
        hide : function(skipAnim) {
            if (this.hidden) {
                return;
            }
    
            if (this.animate === true && !skipAnim) {
                if (this.el.shadow) { // honour WindowDrawer's "shadow" config
                    this.el.disableShadow();
                }
    
                this.el.slideOut(this.alignToParams.slideDirection, {
                    scope    : this,
                    duration : this.animDuration || .25
                });
            } else {
                Ext.ux.plugins.WindowDrawer.superclass.hide.call(this);
            }
    
            // REQUIRED!!!
            this.hidden = true;
            
            this.fireEvent("afterhide", this);
        },
    
        // private
        init : function(parent) {
            this.win = parent;        
            this.render(this.ownerCt? this.ownerCt.getEl() : Ext.getBody());
            this.resizeHandles = this.side; // allow resizing only on 1 side (if resizing is allowed)
    
            parent.drawers = parent.drawers || {};
            parent.drawers[this.side] = this; // add this WindowDrawer to the parent's drawer collection
            parent.on({
                scope         : this,
                tofront       : this.onBeforeShow,
                toback        : this.onBeforeShow,
                ghost         : this.onBeforeResize,
                move          : this.alignAndShow,
                resize        : this.alignAndShow,
                beforedestroy : this.destroy,
                render        : function(p) {
                    // render WindowDrawer to parent's container, if available
                    this.render(p.ownerCt? p.ownerCt.getEl() : Ext.getBody());
                },
    
                beforehide: function() {
                    this.hide(true);
                }
            });
        },
    
        // private
        initComponent : function() {
            Ext.apply(this, {
                frame           : true,
                draggable       : false,
                modal           : false,
                closeAction     : 'hide',
                alignToParams   : {}
            });
    
            this.on({
                beforeshow : {
                    scope : this,
                    fn    : this.onBeforeShow
                },
                beforehide: {
                    scope : this,
                    fn    : this.onBeforeHide
                }
            });
    
            if (this.size) {
                if (this.side == 'e' || this.side == 'w') {
                    this.width = this.size;
                } else {
                    this.height = this.size;
                }
            }
    
            Ext.ux.plugins.WindowDrawer.superclass.initComponent.apply(this);
            
        },
    
        // private
        onBeforeResize : function() {
            if (!this.hidden) {
                this.showAgain = true;
            }
            this.hide(true);
        },
        
        //private 
        onBeforeHide : function() {
            if (this.animate) {
                this.getEl().addClass('x-panel-animated');
            }
        },
            
    
        // private
        onBeforeShow : function() {
            this.el.addClass('x-panel-animated');        
            this.setAlignment();
            this.setZIndex(this.win.el.getZIndex() - 3);
        },
    
        // private
        afterShow : function(skipAnim) {
            if (this.animate && !skipAnim) {
                this.getEl().removeClass('x-panel-animated');
                this.el.slideIn(this.alignToParams.slideDirection, {
                    scope    : this,
                    duration : this.animDuration || .25,
                    callback : function() {
                        if (this.el.shadow) { // honour WindowDrawer's "shadow" config
                            // re-enable shadows after animation
                            this.el.enableShadow(true);
                        }
                        
                        // REQUIRED!!
                        this.el.show(); // somehow forces the shadow to appear
                    }
                });
            } 
            else {            
                Ext.ux.plugins.WindowDrawer.superclass.afterShow.call(this);
            }
            this.fireEvent("aftershow", this);
        },
    
        // private
        alignAndShow : function() {
            this.setAlignment();
    
            if (this.showAgain) {
                this.show(true);
            }
            this.showAgain = false;
        },
    
        // private
        setAlignment:  function() {
            switch(this.side) {
                case 'n' :
                    this.setWidth(this.win.el.getWidth() - 10);
                    Ext.apply(this.alignToParams, {
                        alignTo        : 'tl',
                        alignToXY      :  [5, (this.el.getComputedHeight() * -1) + 5],
                        slideDirection : 'b'
                    });
                    break;
    
                case 's' :
                    this.setWidth(this.win.el.getWidth() - 10);
                    Ext.apply(this.alignToParams, {
                        alignTo        : 'bl',
                        alignToXY      :  [5, (Ext.isIE6)? -2 : -7],
                        slideDirection : 't'
                    });
                    break;
    
                case 'e' :
                    this.setHeight(this.win.el.getHeight() - 10);
                    Ext.apply(this.alignToParams, {
                        alignTo        : 'tr',
                        alignToXY      :  [-5, 5],
                        slideDirection : 'l'
                    });
                    break;
    
                case 'w' :
                    this.setHeight(this.win.el.getHeight() - 10);
                    Ext.apply(this.alignToParams, {
                        alignTo        : 'tl',
                        alignToXY      :  [(this.el.getComputedWidth() * -1) + 5, 5],
                        slideDirection : 'r'
                    });
                    break;
            }
    
            if (!this.hidden) {
                this.el.alignTo(this.win.el, this.alignToParams.alignTo, this.alignToParams.alignToXY);
    
                // Simple fix for IE, where the bwrap doesn't properly resize.
                if (Ext.isIE) {
                    this.bwrap.hide();
                    this.bwrap.show();
                }
            }
    
            // force doLayout()
            this.doLayout();
        },
       
        
        // private
        toFront: function() {
            this.win.toFront(); // first bring WindowDrawer's parent to the front
            //this.setZIndex(this.win.el.getZIndex() - 3); // then place WindowDrawer behind its parent
            return this;
        }
    });
    Last edited by mystix; 9 Jun 2010 at 10:49 PM. Reason: highlight added code in red

  9. #149
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    888
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Thank you for this plugin, it's been a while but now i am in the need of such feature. thanks to all you posters this even works in Ext 3.4.0 now. Thanks a alot