REQUIRED INFORMATION

Ext version tested:

  • Ext 4.2.0 beta 2

Browser versions tested against:
  • Chrome
  • IE9

DOCTYPE tested against:
  • <!DOCTYPE html>

Description:
  • Am I wrong to expect the body's top border hidden in the test case below according "border: false"?

Steps to reproduce the problem:
  • Just run the sample

The result that was expected:
  • There is no the body's top border

The result that occurs instead:
  • The body's top border appears

Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Panel border: false</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />

    <style>
        .my-panel .x-panel-header {
            background-color: white;
            background-image: none;
            border: none;
        }

        /*it helps to hide the body's top border*/
        /*.my-panel .x-panel-body {
            border: none;
        }*/
    </style>
    
    <script src="../ext-all-debug.js"></script>

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.panel.Panel", {
               renderTo: Ext.getBody(),
                width: 200,
                height: 200,
                title: "Title",
                border: false,
                cls: "my-panel",
            });
        });
    </script>
</head>
<body>

</body>
</html>

HELPFUL INFORMATION

Additional CSS used:
  • ext-all.css
  • To hide the header's borders:

Code:
<style>
    .my-panel .x-panel-header {
        background-color: white;
        background-image: none;
        border: none;
    }

    /*it helps to hide the body's top border*/
    /*.my-panel .x-panel-body {
        border: none;
    }*/
</style>