View Full Version : BUG? resizable [Ext.resizer.Resizer] event delegation cannot be stopped

8 Feb 2012, 11:29 AM
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
height: 600,
width: 800,
border: true,
margin: 25,
title: 'Parent Container',
resizable: true,
renderTo: Ext.getBody(),
items: [{
height: 400,
width: 600,
border: true,
margin: 50,
html: 'Child Element',
resizable: true

Came across an interesting problem that I checked in multiple version of 4 (including Beta 2). It does not seem that anyone has attempted what I have here. I have 2 nested panels (a child inside a parent) that I need to both be re-sizable on their own. The resizing effect works as expected, however, when hovering over either of the panels re-sizer, both panels re-size handles are displayed. It does not matter which one you choose first as the effect is the same across the board. It seems that the event delegation for the 'mouseover' event is cascaded in either direction as the delegate is '.x-resizable-handle' which
exists multiple times within the panel. I have tried overriding all of these events and even applying

stopEvent: true

to the event handler which did not suppress this issue. I did not submit this as a bug because this very well could be my misunderstanding of the event delegation altogether. If anyone can shed some light on this it would be much appreciated. Thank you.

PS. I attached an example index file I was working with as well.