HTML
<div id="activities"></div>
<div id="activity-edit"></div>
JavaScript
require([
'dojo/ready', 'dojo/dom', 'dijit/registry', 'dojox/mobile/parser', 'dojox/mobile/deviceTheme', 'dojox/mobile/compat', 'dojox/mobile/Icon', 'dojox/mobile/ScrollableView', 'dojox/mobile/Heading', 'dojox/mobile/ToolBarButton', 'dojox/mobile'
],
function(ready, dom, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ToolBarButton, mobile) {
ready(function() {
var view_activities = new ScrollableView(null, 'activities');
view_activities.selected = true;
var heading = new Heading({
label: 'Activities',
fixed: 'top'
});
view_activities.addFixedBar(heading);
var button = new ToolBarButton({
icon: 'mblDomButtonWhitePlus',
style: 'float:right;',
moveTo: 'activity-edit',
onClick: function(e) {
click_activity_edit(e, 0);
}
});
heading.addChild(button);
var view_activity_edit = new ScrollableView(null, 'activity-edit');
view_activities.startup();
});
this.click_activity_edit = function(e, activityid) {
var view_activity_edit = registry.byId('activity-edit');
view_activity_edit.destroyDescendants(false);
heading = new Heading({
id: 'heading-activity-edit',
label: 'Activity',
fixed: 'top'
});
view_activity_edit.addChild(heading);
var button = new ToolBarButton({
label: 'Cancel',
moveTo: 'activities',
transitionDir: -1,
arrow: 'left'
});
heading.addChild(button);
button = new ToolBarButton({
label: 'Save',
style: 'float:right;',
moveTo: 'activities',
transitionDir: -1,
onClick: function(e) {
click_activity_save(e, activityid, function() {
data.get_activities(request, handle_getActivities);
});
}
});
heading.addChild(button);
view_activity_edit.startup();
};
parser.parse();
});
Steps to recreate the behavior:
Click the "+" button, click "Cancel", click the "+" button again, click "Cancel" again and the button no longer works.
If you replace addFixedBar with addChild, the button works as expected every time. I would do this, but I need the Heading to be fixed given that it is on a ScrollableView.
I understand that addFixedBar adds the widget to the domNode and not the containerNode, but I don't understand why that affects the behavior of the button and only on the second pass. My guess is that it has something to do with the destroyDescendants call not actually removing the Heading when using addFixedBar. I tried destroying the Heading manually after calling destroyDescendants, but that didn't work. The heading is undefined/null on the second pass whether I get the Heading by "dom" or "registry".
Any help or explanation is appreciated.
EDIT
Here is the JSFiddle: http://jsfiddle.net/MPUvk/