Question

我正在尝试重用一些代码来将组件初始化回其初始状态。所以我有一个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);
  }
});

Ext JS Component - 我什么时候可以操作DOM？

0 个答案: