Sencha Touch 2 event: painted vs show?

Question

I have a question regarding the show event. in my application I'm handling the painted event of my panel like this:

Ext.define('mvcTest.controller.Test', {
    extend: 'Ext.app.Controller',
    config: {
    refs: {
            panel: '#testpanel'
    },
    control:{
                panel: {
                    painted: 'onPainted'        
                }
        }
    },
    onPainted: function(){
        alert('painted');
    }
});

the docu say's, that there is also a "show" event, but it get not fired at all:

Ext.define('mvcTest.controller.Test', {
    extend: 'Ext.app.Controller',
    config: {
    refs: {
            panel: '#testpanel'
    },
    control:{
                panel: {
                    show: 'onShow'        
                }
        }
    },
    onShow: function(comp, obj){
        alert('show');
    }
});

why this does not work? i know, alerting is the wrong way, but that's not the question. thanks, mike

Answer 1

It seems that there's no mistake in your controller. The key reason may lie in another part of your application but ... ok, according to my experience:

• painted event straight-forward. Everytime your view is really rendered on the screen, painted fired up. (Note: painted event fires BEFORE the child components of your view are totally rendered. In another word, painted first, DOM generation second.)

• show event does NOT necessarily fire up, especially for the initialization time of your view. show event is something fired up when you firstly somehow hide your view, and show it later.

Just experience, may be variant. But hope it might be helpful for you.

Answer 2

You can't handle 'painted' event in controller, because it is not bubbled up to it.

From sencha docs: This event is not available to be used with event delegation. Instead 'painted' only fires if you explicily add at least one listener to it, due to performance reason. You can handle it by defining a listener in you panel.

Ext.define('MyApp.view.MyPanel', {
  extend: 'Ext.Panel',
  config: {
  },
  listeners: {
    painted: function (element, options) {
      console.log("I've painted");
    }
  }
});

But 'show' event can be handled in controller. Check if another part of your application see that controller. (Have you provided reference to your controller? Is the id of your panel is right?)

Answer 3

I know this is an old thread, but someone might find it useful: Sencha does not initially fire the event 'show' and 'painted'. You need to trigger it initially.

Use this code snippet to listen to the events from the controller:

Ext.define('MyApp.view.MyPanel', {
  extend: 'Ext.Panel',
  config: {
  },
  listeners: {
    painted: function (element, options) {
      this.fireEvent('painted', [element, options])
    }
  }
});