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、运行效果：

貌似加添加下面这个就可以。

 style: {border:'1px solid red' }

 最近我也刚学习用这个ext布局，页面form表单数据多了，真不是一点点的麻烦啊。

bodyStyle: 'border-width:0 0 1px 0;' 设置你想要的边框，顺序是上右下左。希望有用哈