ExtJS throwing Invalid domNode reference or an id of an existing domNode: null when trying to bind o-CodePudding

For this code with the bind part not commented I get the error message which I post below the code.

<!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,
    layout: {
        type: 'vbox',       // Arrange child items vertically
        align: 'stretch',    // Each takes up full width
        padding: 5
    },
    items: [{               // Results grid specified as a config object with an xtype of 'grid'
    xtype: 'button',
    text: 'button1',
    pressed: false,
    reference: 'button1',
    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>

following error message:

[E] Ext.dom.Element.constructor(): Invalid domNode reference or an id of an existing domNode: null ext-all-debug.js:10375:31
extPanel.html:34

When I remove the bind part from the code then everything works fine.

CodePudding user response：

In button1 you must add:

enableToggle: true,

pressed is only available for toggle buttons.