View Full Version : ExtJS panel issue

9 May 2011, 11:20 PM
I have a panel container and inside that i have child panels. I want the child panels to be draggable and resizable anywhere inside the container. I have used Ext.override property. After that what happens is that wherever i declare panels, all those panels are resizable. I want only the childpanels to be resizable and the rest of panels should not have resizble property.

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',
// handles:'s' gives vertical resizing only
// minHeight: this.minHeight || 100,
// minWidth:this.minWidth || 100,
pinned: false,
transparent: true
this.resizer.on("resize", this.onResizer, this);
onResizer: function (oResizable, iWidth, iHeight, e) {
Any help would be appreciated

10 May 2011, 4:07 AM
Ext.override globally overrides functionality for the specified class.

Instead, take a look at Ext.extend.

12 May 2011, 1:44 AM
i tried to use ext.extend but this no longer seems to work.
this is the child panels that i am generating dynamically.

var childPanel = new Ext.Panel({
// private
draggable: dragMeToHeckAndBack,
layout: 'fit',
cls: 'added-child',
//height: 100,
title: obj.title ? obj.title : componentTitle,
fieldLabel: tag,
//id: 'id'+componentTitle+childPanelCount,
resizable: true,
width: obj.width ? obj.width : 200,
height: obj.height ? obj.height : 100,
x: obj.xpos ? obj.xpos : 10,
y: obj.ypos ? obj.ypos : startYPosition,
tools: tools
//html: getImage

});I want only these child panels to be draggable and resizable. If the use the code which i have shown on my first post all the panels will have resizable property.
Can anybody help?

12 May 2011, 4:47 AM
Wouldn't it be easier if you just posted all of your requirements to the forum and let us write your app for you? :D

Here's a functioning, simple example of how you create an extended panel class:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" id="theme" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

// Define a new extended Panel class called "MyChildPanel".
MyChildPanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
// anything in this config block will be automatically applied to all newly
// created instances of MyChildPanel.
config = Ext.apply({
// set global options for all child panel instances here.
draggable: true
}, config);

MyChildPanel.superclass.constructor.call(this, config);

myNewPanelMethod: function() {
Ext.Msg.alert('New Panel Method!', "I'm a new Panel method available on all instance of MyChildPanel!");

// create a new instance of a "MyChildPanel" object, specifying any custom config
// for the panel instance.
var childPanelInstance = new MyChildPanel({
height: 400,
title: 'Child Panel',
width: 600,
renderTo: 'contentDiv'

// call the new method defined by the MyChildPanel extension.
<div id="contentDiv"></div>

12 May 2011, 9:25 PM
I am a newbie in extjs.Thats the reason y i am running short of ideas :( .Can u pls suggest a solution for the following issue.
For each child panel created i am passing a tag to the server side. Nowthat i have created an attribute panel to the right, i need to get values that are entered manually and pass those values into the tag. For the time being i dont have any provision to select any child panel inside the panel container.