Question

我有一个可调整大小的extjs面板。我需要在调整大小事件后计算面板的x和y位置。到目前为止我已经完成了这个

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);

有人可以帮我解决这个问题吗

Answer 1

我不确定您使用此代码尝试实现的目标。我创建了js fiddle来演示“可调整大小”的面板（带有动画过渡），这是我最终得到的代码：

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;
                }
            });
        }
    }
});

调整大小后无需计算面板位置，但如果您确实需要自定义应用程序代码的信息，则可以在resizeElement函数中使用框变量。

Extjs面板缩放器 - 调整大小后

1 个答案: