ExtJS6.0中页面运行及浏览器resize时出现offsetHeight null错误求助

Hey fellow ExtJS dev, let's break down how to fix this frustrating error—both when it hits immediately and when it pops up after resizing the browser window. I've dealt with this exact issue a few times, so here's what to look for:

1. Immediate Error Trigger: "Cannot read property 'offsetHeight' of null" Right Away #

This usually boils down to trying to access a DOM element that doesn't exist yet or has already been removed:

• Premature DOM access: If you're trying to grab offsetHeight in initComponent or before the component finishes rendering, the element simply isn't there yet. Always use lifecycle events like afterrender or boxready to run DOM-dependent code:

  Ext.define('MyApp.view.MyComponent', {
      extend: 'Ext.panel.Panel',
      initComponent: function() {
          this.callParent(arguments);
          this.on('afterrender', this.handleAfterRender, this);
      },
      handleAfterRender: function() {
          var height = this.getEl().dom.offsetHeight;
          // Safe to use height here
      }
  });
  

• Accessing a destroyed component: If a component was already destroyed (via destroy()) but your code still holds a reference to it, trying to access its DOM will throw this error. Check for memory leaks—make sure you unregister event listeners and clear any global references when components are destroyed.
• Hidden/unrendered components: Components initialized with hidden: true or set to hidden before rendering might not have their DOM elements created yet. Always verify visibility and rendering status before accessing DOM properties:

  if (this.isVisible() && this.rendered) {
      var height = this.getEl().dom.offsetHeight;
  }
  

2. Error on Browser Resize After Some Time #

This happens when layout recalculations during resize try to access a DOM element that's gone stale or was removed unexpectedly:

• Stale DOM references in resize handlers: If you cached a DOM element reference (e.g., var myDom = this.getEl().dom;) somewhere, resize might trigger a re-render that replaces the old DOM element—leaving your reference as null. Avoid caching DOM elements; always fetch fresh references when needed:

  // Bad: Caching the DOM element
  this.myDom = this.getEl().dom;
  
  // Good: Fetching it dynamically
  onResize: function() {
      var el = this.getEl();
      if (el) {
          var height = el.dom.offsetHeight;
          // Resize logic here
      }
  }
  

• Layout conflicts during resize: ExtJS auto-updates layouts on resize, but if a component is removed from the layout (e.g., via remove() or dynamic hiding) mid-resize, the layout system might still try to calculate its dimensions. Double-check your layout configurations (like fit, hbox, or vbox) to ensure components are properly managed during dynamic changes.
• Custom resize handlers missing null checks: If you've overridden onResize or added a custom resize listener, always add a guard clause to check if the element exists before accessing properties:

  this.on('resize', function() {
      var el = this.getEl();
      if (!el || !el.dom) return; // Exit if element is null
      var height = el.dom.offsetHeight;
      // Your resize logic
  }, this);
  

Quick Debugging Tips #

• Use your browser's DevTools to set a breakpoint on the error line. Check the call stack to see which component or function is triggering the null reference.
• Log component instances before accessing their DOM to confirm they're still valid: console.log('Component:', this); console.log('Element:', this.getEl());
• Enable ExtJS's debug mode (by including the debug build of the framework) to get more detailed error messages about which component is causing the issue.

内容的提问来源于stack exchange，提问作者Mr. Wu