Обмен event'ами между item'ами контейнера
 

Ext.define("MainPanel", {
	extend: "Ext.panel.Panel",

	initComponent: function() {
		this.border = 2;

		this.buttons = [{
			text: "TestEvent",
			scope: this,
			handler: function() {
				this.fireEvent("TestEvent");
			}
		}];

		this.callParent(arguments);

		this.addListener("TestEvent", this.onTestEvent, this);
	},

	onTestEvent: function() {
		if(window.console && console.log)
			console.log("MainPanel.onTestEvent() (%s)", this.title);
	}
});

Ext.define("InnerPanel", {
	extend: "Ext.panel.Panel",

	initComponent: function() {
		this.border = 2;
		
		this.buttons = [{
			text: "TestEvent",
			scope: this,
			handler: function() {
				this.fireEvent("TestEvent");
			}
		}];
		
		this.bubbleEvents = this.bubbleEvents.concat([
			"TestEvent"
		]);
		
		this.callParent(arguments);

		this.on({
			scope: this,
			render: function() {
				this.ownerCt.on({
					scope: this,
					TestEvent: this.onTestEvent
				});
			}
		});
	},

	onTestEvent: function() {
		if(window.console && console.log)
			console.log("InnerPanel.onTestEvent() (%s)", this.title);
	}
});

Ext.onReady(function() {
	Ext.QuickTips.init();

	Ext.create("MainPanel",{
		title: "MainPanel",
		items: [
			Ext.create("InnerPanel", {
				title: "InnerPanel# 1"
			}),
			Ext.create("InnerPanel", {
				title: "InnerPanel# 2"
			})
		],
		renderTo: Ext.getBody()
	});
});

Для одного уровня вложенности более-менее выглядит по-людськи и работает. А, вот, если "...яйцо в утке, утка в зайце, заяц в медведе..." - тут и смерть настает... Конечно, можно завести один общий bus и гонять по нему все, но, как-то хочется, так сказать, инкапсулировать все внутри... Any ideas?