关于ext4比较麻烦的样式问题，怎么解决

先看代码： xtype: "panel",
//     layout: "border",//注释掉此行时，是我想要的样式，图片如下，但我必须要此行，即我必须要border布局，怎么办？
 baseCls: "x-plain",
 items:
 [
    {
     region: "north",
     xtype: "container"
    },
    {
     region: "center",
     xtype: "container"
    }     
 ]是我想的样式图片一如下：但此时，layout: "border"，这行要去掉，即不能要border布局
如果要border布局，则样式就成下面的了，样式图片二：这个样式不是我想要的，此时，即有layout: "border"，时，我怎么写才能要我想要的样式呢？即图片一所示的样式我想过加：bodyStyle: "background-color: #ffffff;",此时背景都成白色的了，我根本就不知道那个想要的窗体样式是什么颜色代码，所以，没法弄，请大虾帮忙想点办法，多谢

解决方案 »

  1.   

    补充下，由于我要用换主题的功能，所以，bodyStyle: "background-color: #ffffff;",这个不能写死了，不然，我换成蓝色主题时，就不协调了，下面我上传蓝色主题的，上面两张图片对比图：
    图一：图二：
      

  2.   

    我们切换主题都是通过修改CSS实现的
      

  3.   

    重写下css就好了吧，用firebug查看下作用在节点上的样式，在页面内增加style标签覆盖掉css文件中加载的样式
      

  4.   

    这里不是切换样式的问题啊，是想在border布局下，界面的颜色要跟窗体的颜色融合在一起，图二的显示比图一难看啊。
    border的布局，破坏了这种融合，其它布局可以，但这里由于我要做伸拉窗，要不得不用border布局
      

  5.   

    很简单的一个例子啊<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"><html>
      <head>
        
    <link rel="stylesheet" type="text/css" href="/ext4.1.1/resources/css/ext-all.css"/>
         <script type="text/javascript" src="/ext4.1.1/ext-all.js"></script>
        <script type="text/javascript">
        Ext.onReady( function (){

    var win = Ext.create("Ext.window.Window",{
          title: "测试窗体",
          layout: "fit",
          border: false,
          width: 300,
          height: 300,
          plain: true,
          items:[
          {
              xtype: "panel",
    layout: "border",//想要注释掉此句的效果
      baseCls: "x-plain",
      items:
      [
         {
         //region: "north",
         xtype: "container"
         },
         {
         //region: "center",
         xtype: "container"
         }     
      ]
          }
          ]
    });

    win.show();

    });  
        </script>   
      </head>
      <body>
      </body>  
    </html>
      

  6.   

    我用工具对比了下两者的CSS差异，图一比图二大致多了个：<div class="x-clear" id="container-1010-clearEl" role="presentation"/>
    但知道这个，要有什么用呢
      

  7.   

    不是那个。。layout不为border时多的<div class="x-clear" id="container-1010-clearEl" role="presentation"/>这个不是影响背景色的，而是他的父节比指定为border时少了一个x-border-layout-ct样式，这个样式设置了一个背景色。再倒入总的ext css的文件后面设置这个样式的背景色为transparent覆盖样式表中的背景色就好了你自定义ext的css样式时可以再样式最后增加这句去除layout:'border'增加的样式背景色
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XML Grid Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />    <!-- GC -->    <script type="text/javascript" src="../../ext-all.js"></script>
    <style type="text/css">
    .x-border-layout-ct{background:transparent}/*......这句关键，设置增加的layout：border增加的背景色为透明的..........*/
    </style>
          <script type="text/javascript">
        Ext.onReady( function (){
             
            var win = Ext.create("Ext.window.Window",{
               title: "测试窗体",
               layout: "fit",
               border: false,
               width: 300,
               height: 300,
               plain: true,
               items:[
                   {
                       xtype: "panel",
                       layout: "border",//想要注释掉此句的效果
                       baseCls: "x-plain",
                       items:
                       [
                            {
                                //region: "north",
                                xtype: "container"
                            },
                            {
                                //region: "center",
                                xtype: "container"
                            }                   
                       ]
                   }
               ]
            });
             
            win.show();
             
        });  
        </script>   
      </head>
      <body>
      </body>  
    </html>