日期:2014-05-16  浏览次数:20326 次

Extjs4开发笔记(二)——框架的搭建

转载:http://www.mhzg.net/a/20116/201162913210280.html

Extjs4开发笔记(二)——框架的搭

本文内容已经重新更新,旧版请查看:www.mhzg.net/a/20116/201162913210280-old.html

由于最近老出差,所以代码无法及时更新。导致近一周都没有更新。

废话不多说了,上篇文章建立了比较基础的文件。今天开始搭建大体的框架,由于Extjs4在组件建立方面有了很大的改变,所以第一次建立的框架页面还是费了比较长的时间。本章内容增加了一些图片及CSS文件,目的是为了美化整个界面。增加的CSS文件:

注意事项:layout、region的使用,如果没有看API及相关文档的话,那么面对错误对话框的时候,还不知道是怎么回事。

本文将main.js放到了/app/controller文件夹下,这将是整个项目的主体文件。

而头部、菜单、内容区及底部则完全分离成4个JS文件,我们将先实现这几个文件的基础功能,之后我们会慢慢完善这些组件。而整个页面的填充,也使用一个JS文件来完成。也许有人会问,这么多文件,是不是要都在index.html中引入啊。这样想的话,就错了哦。因为我们使用的是Extjs4,所以我们一定要使用Extjs4?动态加载功能。

先来看下自定义CSS(sytle.css):

?
  1. #header?{?background:?#7F99BE?url(/images/layout-browser-hd-bg.gif)?repeat-x?center;}
  2. #header?h1?{font-size:?16px;color:?#fff;padding:?3px?10px;?font-family:"微软雅黑","黑体"}
  3. .tabs{}
  4. .tabs{background-image:?url(../images/menuPanel/bulletin_manager.gif)?!important;}
  5. .manage{background-image:?url(../images/menuPanel/admin.gif)?!important;}
  6. .home{background-image:?url(../images/home.gif)?!important;?line-height:30px;}
  7. .icon-menu{background-image