EXTJS4.x之实战项目（1）

今天开始做一个资源管理项目做为实战。

用Sencha Architect创建一个名字为“admin”的工程，保存在webRoot目录下。

1.添加Viewport。

在设计窗口中拖入一个Viewport设置以下属性：

UserClassName：设置为BoboViewport；

layout：设置为border；

2.创建左侧菜单Panel.

在设计窗口拖入一个Panel到BoboViewport，设置以下属性

title：菜单；

region: 'west'

id：MenuPanel；

layout：accordion；

3.创建头部Panel

在设计窗口拖入一个Panel到BoboViewport，设置以下属性

region: 'north',

height: 40,

id: 'HeaderPanel',

拖入一个Lable到HeaderPanel中，设置以下属性

html: '<div style="background-image: url(static/banner_bg.png); height: 40px;"> <p style="line-height:40px;height: 40px; color: #fff; font-size: 22px; font-weight: bold ;padding-left: 20px; vertical-align: middle;">管理系统 </p> </div>'；

text: "";

static/banner_bg.png这个图片放到合适的位置，如下图：

4.创建中心视图TabPanel

设置以下属性:

 region: 'center';

 id: 'CenterTabPanel',

启动tomcat，在myeclipse中刷新以下工程，打开浏览器看到如图效果