EXTJS 边框怎么设置

EXTJS中border布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分。

1、实例演示：

Ext.onReady(function()

{

  Ext.create('Ext.panel.Panel',

      {

          title: '容器面板',

          renderTo: 'div1',

          width: 450,

          height: 300,

          layout: 'border',

          defaults:

              {

               split: true,                  //是否有分割线

                  collapsible: true,           //是否可以折叠

                  bodyStyle: 'padding:15px'

              },

          items: [

                  {  //子元素的方位：north、west、east、center、south   region: 'north',

                      title: '北',

                      xtype: "panel",

                      html: "子元素1",

                      height: 70

                  },

                  {

                      region: 'west',

                      title: '西',

                      xtype: "panel",

                      html: "子元素2",

                      width: 100

                  },

                  {

                      region: 'east',

                      title: '东',

                      xtype: "panel",

                      html: "子元素2",

                      width: 100

                  },

                  {

                      region: 'center',

                      title: '主体',

                      xtype: "panel",

                      html: "子元素3"

                  },

                  {

                      region: 'south',

                      title: '南',

                      xtype: "panel",

                      html: "子元素4",

                      height: 70

                  }

                 ]

      })

})

2、运行效果：

不知道你当前是怎么布局的。

如果是按 lokily2010 所说的。

你只需要在panel属性中加上： style : 'margin:10px 5px 15px 20px'

我使用的是添加属性： margins : '10 5 15 20' 效果和上面应该是一样的

说明：{top:0, right:0, bottom:0, left:0}，顺序是这样的。

属性说明

style : String

作用在组件元素上特定的样式。

---