View Full Version : Extending panel

22 Sep 2011, 4:27 AM
I need to extend a panel with resizable property. This is what i did so far

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

if (this.draggable) {
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) {

code for creating panel

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


As you can see i am overriding the property. therefore all the panels that i create have these properties. I dont want like that. I need to extend the panel rather than overriding it. Can anybody extend the default behaviour of panel with the above code and paste it here?

22 Sep 2011, 5:57 AM
Use Ext.extend to extend classes!

Acme.ResizePanel = Ext.extend(Ext.Panel, {
initEvents: function() {

var childPanel = new Acme.ResizePanel({...});