reference - sencha touch 2 id of view returning undefined -

i have declared view shown below:

ext.define('app.view.about', { extend: 'ext.panel', id: 'about', xtype: 'aboutpanel', // used reference main.js config: {             title: 'about',             iconcls: 'icon-file',             scrollable: true,             stylehtmlcontent: true,             items: {                 docked: 'top',                 xtype: 'titlebar',                 title: 'about'             },             html: 'this page contain basic information.'         }   }); 

i have declared controller shown below:

ext.define('app.controller.about', { extend : 'ext.app.controller',    config : {     refs    : {      : '#about'     }   },    init : function () {     var me = this;     me.getabout().sethtml('hello'); // testing   }              });      

however in developer tools of chrome getting error "cannot call method 'sethtml' of undefined". therefore understand it, controller not getting view id. using sencha touch 2.2.1.

any please? in advance,

you won't have access refs in init() function of controller. similar functionality, code initialize listener on about panel:

ext.define('app.controller.about', {     extend : 'ext.app.controller',      config : {         refs    : {             : '#about'         },         control: {             about: {                 initialize: 'initabout'             }          }     },      initabout: function () {         var me = this;         me.getabout().sethtml('hello'); // works now!     }              }); 

as side note, redundant give components id in in definition. should reserve id when you're instantiating components (and should use itemid instead of id in case anyway).