extjs - Ext JS コンポーネント - いつ DOM を操作できますか?

Question

コンポーネントを初期化して初期状態に戻すコードを再利用しようとしています。だから私はデフォルトのパラメータでreset()関数を呼び出す関数を持っています。update()

どこでも、DOM要素にアクセスしようとするとnullになります。ページがレンダリングされた後、ボタンイベントを介してテストしたコードではありません。initComponent() を使用するのは時期尚早のようです。そのため、イベントのサブスクライブについて調べました。

のイベントを見ると、Ext.Component適切と思われるのはrender「コンポーネント マークアップがレンダリングされた後に発生する」というイベントだけです。

繰り返しますが、null 参照を取得します。他の場所で再レンダリングされた場合に備えて render を実際に使用したくないので、これを使用することに熱心ではありません。これは 1 回限りのイベント (初期化時/初期化後) ですが、再度呼び出すことができます。

初期化時にコンポーネントのDOMにいつ/どのようにアクセスする必要がありますか?

クラスは次のとおりです。

Ext.define('PegfileApp.view.ContentHeader', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.contentHeader',
  id: 'contentHeader',
  // layout

  border: 1,
  html: " \
    <h1 id='survey-header' class='lg'>Blah blah</h1> \
    <h2 id='survey-subheader' class='mb'></h2> \
    <div id='survey-header-content'></div> \
    ",
  width: 634,
  height: 75,
  listeners: 
  {
    'render': function () {
      alert("rendered");
      this.reset();
    }
  },
  // funcs

//  initComponent: function () {
////    this.on("afterrender", function () {
////      alert("rendered");
////      this.reset();
////    });
//    
//  },

  reset: function () {
    this.update('This is the header', 'This is the sub-header', 'Total number of files created: <b>30</b>')
  },

  update: function (header, subheader, content) {
    Ext.get('survey-header').update(header); // << == null
    Ext.get('survey-subheader').update(subheader);
    Ext.get('survey-header-content').update(content);
  }
});