I added a Form panel to each modal window and some test fields, just to get a little closer to what you're doing. For the heck of it, I also removed the height/width from both windows and let them figure out their content size.
Note that I don't declare a layout on either window and just let them default to 'auto'. I did however use an anchor layout on the forms with no size declaration on the form fields (which is most probably a bad practice, but I thought it would throw more complexity at the layout manager).
It still seems to work as expected, which makes me think that some other parent container or layout bits may be biting you.
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
bodyPadding: 5,
modal: true,
title: 'Parent Modal Window',
items: [{
xtype: 'form',
bodyPadding: 5,
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName'
}]
}],
buttons: [{
text: 'Make Modal',
handler: function() {
Ext.create('Ext.window.Window', {
modal: true,
title: 'Child Modal Window',
items: [{
xtype: 'form',
bodyPadding: 5,
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'SSN',
name: 'ssn'
},{
xtype: 'datefield',
fieldLabel: 'B-day',
name: 'bday'
}]
}]
}).show();
}
}]
}).show();
});
</script>
</head>
<body>
</body>
</html>
