今天开始做一个资源管理项目做为实战。
用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中刷新以下工程,打开浏览器看到如图效果