Extjs5.0(4)：开始正式的编写Extjs5.0代码

在编写代码之前，先熟悉一下我们上一篇文章中介绍的用sencha cmd生成的项目的目录结构。

.sencha/                        # sencha特定的主要配置文件
    app/                        # 应用特定的内容
        sencha.cfg              # Sencha Cmd配置
        Boot.js                 # 动态加载 JS 和 CSS
        Microloader.js          # 加载app.json 里面的内容
        build-impl.xml          # 构建应用程序的标准t
        *-impl.xml              # 实现不同的构建阶段
        defaults.properties     # 属性的默认值和文档
        ext.properties          # 构建特定的Extjs默认值
        *.defaults.properties   # 构建属性的环境
        plugin.xml              # sencha cmd插件
        codegen.json            # 升级期间数据合并生成的数据
    workspace/                  # 工作空间内容
        sencha.cfg              # sencha cmd工作空间配置
        plugin.xml              # sencha cmd插件

ext/                            #extjs 的sdk
    cmd/                        # Sencha Cmd模板内容
        sencha.cfg              #Sencha Cmd模板配置
    packages/                   # 框架需要的包
        ext-theme-classic/      # Ext JS 经典主题包
        ext-theme-neptune/      # Ext JS 海王星主题包
        ...                     # 其他主题
    src/                        # extjs 源码
    ...

index.html                      # 应用入口
app.json                        # 应用的配置清单
app.js                          # 启动应用
app/                            # 应用的MVVM结构代码
    model/                      # 模型
    store/                      # 仓库
    view/                       # 视图
        main/                   # 主界面内容
            Main.js             # 主界面
            MainModel.js        # 视图模型
            MainController.js   # 视图控制器
    Application.js              # 应用程序入口

packages/                       # Sencha Cmd 的包
build/                          # 接收构建应用时输出的文件夹

以上只是对包的简单介绍，如果字面理解不清楚，那么自己一个一个打开文件去看里面的说明，这里就不做介绍了。除了app包外，其他文件对我们的编程没太大影响，不理解也没关系，不要去修改它就好了。

下面开始编写代码，首先我们要实现的是，修改一下主界面，给主界面上方添加一个标题，例如我们经常看到一些软件最上方写着的“XX系统”。

先看看我们的当前界面是什么样子的，打开cmd，切换到当前extjs项目根目录

启动web服务器，并监听项目

打开浏览器，输入http://localhost:1841/

这就是我们当前界面。

接下来打开app/view/main/Main.js,会发现有这么一段代码

layout: {
    type: 'border'
},

表示我们界面使用的布局是border布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（西）、north（北）和center（中），看下面的border布局示意图：

显然，要在最上面加一个标题，只需要加一个组件，放在北方（north）就可以了。

再看Main.js代码：

发现他里面两个组件都放在items里面,一个region属性是west，一个region属性是center，我们只需要在items里面再放一个region为north的组件就行了。

这个north组件可以直接在Main.js里面编写，也可以新建一个js文件，定义一个组件之后再把组件引入到Main.js中，放在north位置。这里我们选择后者。

在Main.js同级目录下，建立Header.js:

Header.js：

//注意这里的命名空间，命名规则为js文件路径，这里MyApp.view.main.Header命名的同时也指定了Header.js的路径为view/main/Header.js,MyApp为我们项目的命名空间（name），在Application.js中已经做了命名。
Ext.define('MyApp.view.main.Header', { 
    extend: 'Ext.Container',
    xtype: 'app-header',//别名，在Main.js使用该组件时，可以直接用别名
    cls:'app-header',//css
    height: 52,
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    items:[{
        xtype: 'component',
        cls: 'app-header-logo'
    },{
        xtype: 'component',
        cls: 'app-header-title',
        html: 'Extjs5.0实例',
        flex: 1
    }]
});

在Header.js中我们使用了css，所以我们还需要创建css文件，而且我们css中还用到图片，也要把需要的图片加入到我们项目中。在resources文件夹下，建立images文件夹和css文件.

css.css:

.app-header{
    background-color:#2a3f5d;
    border-bottom:1px solid #121b28
}
.app-header-title{
    padding:15px 0 10px 0;
    color:#fff;
    font-size:18px;
    font-weight:bold
}
.app-header-logo{
    width:40px;
    height:25px;
    background:url(images/logo.png) no-repeat center 4px
}

Images中放入logo图片，logo.png，图片我就不上传了，大家可以自己找一张logo，或者在文章的最下面下载本篇文章的代码，里面有logo图片。

把css.css引入到我们项目中。

接下来引入css，找到app.json，

修改app.json文件的此处

最后，在Main.js中使用Header.js。

Main.js:

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainModel',
        'MyApp.view.main.Header'//引入Header
    ],

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [
        {
            region: 'north',
            xtype: 'app-header'//使用Header
        }, {
            xtype: 'panel',
            bind: {
                title: '{name}'
            },
            region: 'west',
            html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
            width: 250,
            split: true,
            tbar: [{
                text: 'Button',
                handler: 'onClickButton'
            }]
        }, {
            region: 'center',
            xtype: 'tabpanel',
            items: [{
                title: 'Tab 1',
                html: '<h2>Content appropriate for the current navigation.</h2>'
            }]
        }]
});

这样已经添加了Header了，浏览器中输入http://localhost:1841/

至此已经成功的添加了header，下篇文章介绍如何修改左侧导航栏为树形结构。

附上本篇文章的源码。

另外，我也把这个项目托管在github上：https://github.com/likeadog/Extjs5.0Demo

交流群：170198012