extjs学习笔记2—border布局

看extjs到现在也有2周左右了，一直不是很有头绪，demo和实例都感觉直接看或者根据它码出来不是很有条理的样子。所以今天下定决心，做一个布局方面的笔记。主要是精简了下extjs的代码，把事件和属性全部都去除了，只留下最基本的布局框架。以后需要什么直接在相应的地方添加就好了。

以下是viewport中border布局的代码

//Ext.onReady是extjs的代码读入点,一个页面可以有多个Ext.onReady,根据先后顺序读取
        Ext.onReady(function () {
            var viewport = new Ext.Viewport({//声明一个viewport
                layout: "border",                         //页面风格定义为border
                items: [{                                      //页面分成五个区域,每个{}中就是一个区
                    region: "north",                        //域，如果想要变成其他的panel可以直接
                    height:50                                  //在用new Ext.XXXX来替代"{...}"
                }, {
                    region: "south",
                    height: 50
                }, {
                    region: "west",
                    width: 200
                }, {
                    region: "east",
                    width: 200
                }, {
                    region: "center"
                }
                    ]
                    });
        });

　　效果图如下

border的主要框架就是这样子了，其他的内容就需要自己添加了

：