Question

i have an extjs panel which is resizable. I need to calculate the x and y position of the panel after resize event. so far i have done this

Panel.resizer = new Ext.Resizable(Panel.el, {
animate: true,
                duration: '.6',
                easing: 'backIn',
                handles: 'all',
                constrainTo: 'dropBoxWindow',
                pinned: false,
                transparent: true
            });
        Panel.resizer.on("resize", function (oResizable, iWidth, iHeight, e) {
console.log(panel.el.getX()); // getting the x position before the resize..need to get position after resize.
            Panel.setHeight(iHeight);
            Panel.setWidth(iWidth);
        }, this);

Can someone help me to fix this

Answer 1

I’m not sure what exactly you are trying to achieve with this code. I created js fiddle that demonstrates “resizable” panel (with animated transition), this is code I end up with:

new Ext.Panel({
    title: 'Resize me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    listeners: {
        render: function(p) {
            new Ext.Resizable(p.getEl(), {
                animate: true,
                duration: '.6',
                easing: 'backIn',
                handles: 'all',
                pinned: false,
                transparent: true,
                resizeElement: function() {
                    var box = this.proxy.getBox();
                    if (this.updateBox) {
                        this.el.setBox(
                        box, false, this.animate, this.duration, function() {
                            p.updateBox(box);
                            if (p.layout) {
                                p.doLayout();
                            }
                        }, this.easing);
                    } else {
                        this.el.setSize(
                        box.width, box.height, this.animate, this.duration, function() {
                            p.updateBox(box);
                            if (p.layout) {
                                p.doLayout();
                            }
                        }, this.easing);
                    }
                    this.updateChildSize();
                    if (!this.dynamic) {
                        this.proxy.hide();
                    }
                    if (this.draggable && this.constrainTo) {
                        this.dd.resetConstraints();
                        this.dd.constrainTo(this.constrainTo);
                    }
                    return box;
                }
            });
        }
    }
});

You don’t need to calculate panel position after resize, but if you actually do need that information for your custom application code, you can use box variable inside resizeElement function.