ExtJS绑定组件配置时抛出Invalid domNode reference: null错误

这个报错本质是缺失ExtJS绑定体系的必要运行条件导致的：

• ExtJS里的reference组件标记、{}格式的绑定表达式，必须依托容器的ViewModel才能正常工作：只有配置了ViewModel的容器，才会给子组件建立引用索引、解析绑定规则、监听状态变化更新DOM。
• 你的代码里父面板resultsPanel压根没配ViewModel，框架初始化button2、解析bind配置的时候，既找不到绑定上下文，也没法通过reference: 'button1'定位到对应按钮实例，后续执行DOM更新逻辑时拿到的节点引用是null，直接抛出Invalid domNode reference错误。
• 额外提一句：你现在写的button1是普通按钮，没开状态切换能力，就算修了报错，点完按钮pressed状态会立刻回弹，不会持久保持，联动显隐的逻辑根本达不到预期效果。

• 给父面板添加viewModel: true配置，自动为当前容器及子组件启用绑定、组件引用能力，简单联动场景不需要自定义ViewModel，开默认配置即可。
• （可选但推荐）给button1添加enableToggle: true配置，让按钮点击后可以保持按下/抬起的持久状态，保证绑定逻辑符合交互预期。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="./ext-all-debug.js"></script>
<script type="text/javascript">
  var resultsPanel = Ext.create('Ext.panel.Panel', {
     title: 'Results',
     width: 600,
     height: 400,
     border: true,
     // 新增：启用默认ViewModel，支撑绑定和reference能力
     viewModel: true,
     layout: {
         type: 'vbox',
         align: 'stretch',
         padding: 5
     },
     items: [
         {
             xtype: 'button',
             text: 'button1',
             pressed: false,
             reference: 'button1',
             // 新增：让按钮支持持久按下状态
             enableToggle: true,
             listeners : {
                 click: { fn: function(){ alert("heheh");}}
             }
         },
         {
             xtype: 'button',
             text: 'button2',
             bind: {
                 hidden: '{!button1.pressed}',
             }
         }
   ]
});
Ext.onReady(function () {
   resultsPanel.render(Ext.getBody());
  }, this, {delay: 1000});
</script>
</head>
<body>
</body>
</html>

内容的提问来源于stack exchange，提问作者Jakub