extjs-mvc结构实践(三):完善基本页面

上篇实现了基本的代码架构，控制器动态加载功能以及一个基础的页面布局，本节开始，将陆续完善这个页面。

目标

如前所述，我们的页面包含这么几个区域：

• header: UI顶部区域，显示系统名称，LOGO，用户头像等其他操作。
• footer: 页面底部区域，主要显示版权信息等，也可以显示个时间啥的。。。
• nav tree:页面导航菜单，一般在页面左侧，一般也是一棵树！
• content panel:中间内容区域，左侧导航点击之后，页面会被加载到这个区域，一般是个panel或者tab切换控件。

接下来逐个定义每个区域的内容。

---

定义header：app/luter/view/main/Header.js

Ext.define('luter.view.main.Header', {
    extend: 'Ext.Container',//继承自容器类
    xtype: 'appheader',
    cls: 'app-header',//自定义样式，参见style.css
    height: 52,//高度
    layout: {//布局，水平box布局
        type: 'hbox',
        align: 'middle'
    },
    initComponent: function () {
        var me = this;
        me.items = [{//先放个LOGO
            xtype: 'image',
            cls: 'circle-pic',
            src: 'app/resource/images/logo.png'
        }, {//再显示个标题
            xtype: 'tbtext',
            flex: 4,
            style: {
                color: '#FFF',
                fontSize: '20px',
                padding: '0px 10px 0px  55px',
                fontWeight: 900
            },
            text: '这里是系统标题'
        }];
        me.callParent();
    }
});

其中，在app/resource/css/style.css中定义了几个样式:

 
.app-header {
    background-color: #2a3f5d;
    border-bottom: 2px solid #1d9ce5;

}
.app-header:hover {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
}
.circle-pic {
    width: 45px;
    height: 45px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.home-body {
    background-image: url(../images/square.gif);
}

---

定义footer:app/luter/view/main/Footer.js

Ext.define('luter.view.main.Footer', {
    extend: 'Ext.toolbar.Toolbar',//继承自工具栏
    region: 'south',
    xtype: 'sysfooter',
    style: {//背景色黑色
        background: '#000'
    },
    frame: false,
    border: false,
    height: 30,
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                xtype: 'tbtext',
                style: {
                    color: '#FFF',
                    fontSize: '14px',
                    textAlign: 'right',
                    fontWeight: 'bold'
                },
                flex: 3,
                id: 'southText',
                text:  Ext.Date.format(new Date(), 'Y') +' © ' +"luter 版权所有"+'<small>:'+"v1.0"+'</small>'
            }, '->', Ext.create('luter.ux.TrayClock', {
                flex: 1,
                style: {
                    color: '#FFF',
                    padding: '0px 0px 0px  0px',
                    fontWeight: 'bold',
                    textAlign: 'right',
                    fontSize: '12px'
                }
            })]
        });
        me.callParent(arguments);
    }
});

在这里，用到了一个时钟插件：TrayClock，这是一个自定义的插件，统一放在目录：
app/luter/ux下面。

---

头部和底部定义完毕后，需要在viewport中引入对应位置。如下：

修改viewport:app/luter/view/main/Viewport.js

/**
 * 主视图占满全屏是个viewport
 */
Ext.define('luter.view.main.ViewPort', {
    extend: 'Ext.Viewport',
    alias: 'widget.viewport',//别名，与xtype对应
    layout: 'border',//东南西北中布局，边界嘛
    stores: [],
    requires: ['luter.view.main.Header','luter.view.main.Footer'],//引入自定义的header和footer
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [{
                region: 'north',
                xtype: 'appheader'//使用自定义的头部,xtype对应组件定义里的：xtype
            }, {
                region: 'west',
                xtype: 'panel',
                title: '西方',
                width: 200
            }, {
                region: 'center',
                title: '中间',
                xtype: 'panel'

            }, {
                region: 'south',
                xtype: 'sysfooter'//使用自定义的footer
            }]
        });
        me.callParent(arguments);
    }
});

---

至此，界面大致看起来应该像这样：

下一篇，我们继续完善这个界面，定义左侧导航、右侧内容展示区域，以及左侧与右侧操作联动等内容。