extjs: events in responce to all changes of the panel container and its components

I have a panel with "autoscroll:true" configuration, and it contains collapsiable fieldsets. I have a graph which will be re-drawed based on changes in this panel and also from its components.

what i want to do is to caputre all these "change" events in order to properly set up the graph according to the positions of panel components.

i think there are two types of events i need to capture:

1） 开发者_如何学Cpanel scroll

here how can I trigger the "afterscorll" event whle panel scroll ends? i used:Ext.getCmp("XX").body.on(afterScroll',function(){}); but doesnt work.

2) fieldset expand/collapse

and also I am wondering whether there is a unified event to capture these changes no matter from scrolling or from expand/collase of fieldsets in this panel? then i can only need to call it once.

I don't know if I got you right; You can bubble the events up to a parent. I am doing this many situations like with the change event on field to the form.

Edit: Here is a simple exmaple. Just typed and untested. But it will show you the trick.

MappingDialog = function(){
   return {
      init : function(){
         dialog = new Ext.Window({
            width:     200,
            height:    150,
            modal:     true,
            closable:  false,
            bubbleEvents: ['saveMapping'], // <- Array with events
            buttons: [{
               text:'Save',
               handler:function(){ this.fireEvent('saveMapping'); }
            }],
            listeners: {
               saveMapping : function() { // should not be called }
            }
         });

         this.addListener('saveMapping', this.saveData, this); // <- Attaching event to Parent (or hand through)
      },
      saveData : function(){ // <- implement eventhandling
         ... Save the data ...
      }
   }
};