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的主要架構就是這樣子了，其他的內容就需要自己添加了

：