Extjs面板扩展

发布于 2024-12-06 23:32:07 字数 1301 浏览 1 评论 0原文

我有一个 extjs 面板。我需要为此面板引入拖动和调整大小属性。

这是创建面板的代码：

var childPanel = new Ext.Panel({
                    draggable: true,
                    layout: 'fit',

 ................
});

我已经使用以下代码实现了拖动和调整属性大小：

Ext.override(Ext.Panel, {
                    // private
                    initEvents: function () {

                        if (this.draggable) {
                            this.initDraggable();
                        }
                        this.resizer = new Ext.Resizable(this.el, {
                            animate: true,
                            duration: '.6',
                            easing: 'backIn',
                            handles: 'all',
                            pinned: false,
                            transparent: true
                        });
                        this.resizer.on("resize", this.onResizer, this);
                    },
                    onResizer: function (oResizable, iWidth, iHeight, e) {
                        this.setHeight(iHeight);
                        this.setWidth(iWidth);
                    }
                });

如您所见，我正在覆盖该属性。因此，我创建的所有面板都具有这些属性。我不想这样。

我知道 Ext.extend 是要使用的方法，但每次我都会遇到一些错误。我需要的是带有上述代码的扩展面板。

有人可以帮助我实现这一目标吗？

原文

I have an extjs panel. I need to induce a drag and resizing property for this panel.

This is the code for creating the panel:

var childPanel = new Ext.Panel({
                    draggable: true,
                    layout: 'fit',

 ................
});

I have achieved drag and resizing properties using the code:

Ext.override(Ext.Panel, {
                    // private
                    initEvents: function () {

                        if (this.draggable) {
                            this.initDraggable();
                        }
                        this.resizer = new Ext.Resizable(this.el, {
                            animate: true,
                            duration: '.6',
                            easing: 'backIn',
                            handles: 'all',
                            pinned: false,
                            transparent: true
                        });
                        this.resizer.on("resize", this.onResizer, this);
                    },
                    onResizer: function (oResizable, iWidth, iHeight, e) {
                        this.setHeight(iHeight);
                        this.setWidth(iWidth);
                    }
                });

As you can see I am overriding the property. Therefore all the panels that I create have these properties. I don't want it like that.

I know that Ext.extend is the method to use but each time I am getting some errors. What I need is an extended panel with the above code.

Can anybody help me to achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

已下线请稍等 2024-12-13 23:32:07

延伸累了吗？有哪些错误？
您应该记住从扩展方法中调用超类构造函数。

MYDRAGRESIZEPANEL = Ext.extend(Ext.Panel,{
    // private
                initEvents: function () {
                    **MYDRAGRESIZEPANEL.superclass.constructor.call(this);**
                    if (this.draggable) {
                        this.initDraggable();
                    }
                    this.resizer = new Ext.Resizable(this.el, {
                        animate: true,
                        duration: '.6',
                        easing: 'backIn',
                        handles: 'all',
                        pinned: false,
                        transparent: true
                    });
                    this.resizer.on("resize", this.onResizer, this);
                },
                onResizer: function (oResizable, iWidth, iHeight, e) {
                    this.setHeight(iHeight);
                    this.setWidth(iWidth);
                }
});

Have you tired extending? what were the errors?
Your should remmeber to call the superclass constructor from the extended methods.

MYDRAGRESIZEPANEL = Ext.extend(Ext.Panel,{
    // private
                initEvents: function () {
                    **MYDRAGRESIZEPANEL.superclass.constructor.call(this);**
                    if (this.draggable) {
                        this.initDraggable();
                    }
                    this.resizer = new Ext.Resizable(this.el, {
                        animate: true,
                        duration: '.6',
                        easing: 'backIn',
                        handles: 'all',
                        pinned: false,
                        transparent: true
                    });
                    this.resizer.on("resize", this.onResizer, this);
                },
                onResizer: function (oResizable, iWidth, iHeight, e) {
                    this.setHeight(iHeight);
                    this.setWidth(iWidth);
                }
});

回复收藏 0 原文

~没有更多了~