Extjs Study Notes 2-border Layout

It has been about two weeks since extjs was viewed. It has never been a good clue. Both the demo and the instance feel that it is not very well organized to directly read or code it out. So today I made up my mind to make a layout note. It mainly simplifies extjsCodeRemoves all events and attributes, leaving only the most basic layout framework. In the future, you just need to add something directly in the corresponding place.

The following is the border layout code in viewport.

// Ext. onready is the code reading point of extjs. A page can contain multiple Ext. onready: reads ext in sequence. onready (function () {var viewport = new Ext. viewport ({// declare a viewport layout: "border", // The page style is defined as border items: [{// The page is divided into five areas, each {} contains a region Region: "North", // field. If you want to change it to another panel, you can directly use Height: 50 // In The New Ext. xxxx to replace "{...} "},{ region:" South ", height: 50 },{ region:" West ", width: 200 },{ region:" East ", width: 200 }, {region: "center"}]}) ;});
 

As follows:

This is the main framework of border. You need to add other content by yourself.

: