0

我正在尝试重用一些代码来将组件初始化回其初始状态。所以我有一个reset()函数调用一个update()带有默认参数的函数。

在我尝试的所有地方，尝试访问 DOM 元素都会导致 null - 它不是代码，因为我在页面呈现后通过按钮事件对其进行了测试。似乎使用 initComponent() 为时过早，所以我查看了订阅事件。

查看 的事件Ext.Component，似乎唯一合适的是render事件：“在渲染组件标记后触发。”

同样，我得到一个空引用。我不热衷于使用它，因为我真的不想使用渲染以防万一它在其他地方重新渲染，它只是一次事件（在初始化时/之后），但可以再次调用。

我们应该何时/如何在初始化时访问组件的 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);
  }
});
4

0 回答 0