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.
In button1 you must add:
enableToggle: true,
pressed is only available for toggle buttons.