ExtJS5_主界面上加入顶部和底部区域

为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。

在增加这二个区域之前，我们先在MainModel.js中加入一些数据。

Ext.define('app.view.main.MainModel', {
    extend : 'Ext.app.ViewModel',
 
    alias : 'viewmodel.main',
 
    data : {
        name : 'app',
 
        // 系统信息
        system : {
            name : '工程项目合同及资金管理系统',
            version : '5.2014.06.60',
            iconUrl : ''
        },
 
        // 用户单位信息和用户信息
        user : {
            company : '武当太极公司',
            department : '工程部',
            name : '张三丰'
        },
 
        // 服务单位和服务人员信息
        service : {
            company : '无锡熙旺公司',
            name : '蒋锋',
            phonenumber : '1320528----',
            qq : '78580822',
            email : 'jfok1972@qq.com',
            copyright : '熙旺公司'
        }
    }
        // TODO - add data, formulas and/or methods to support your view
    });

在上面的代码中，在data中增加了三个类型的数据，下面分别有些属性。这些值和属性以后可以从后台获得。比如说后台的系统名称改过了，前台刷新一下界面，就能展示新的system.name。这也符合我这个系统的开发宗旨，能够动态的信息尽量动态化，修改的时候只要在前台配置就可以，不要去修改后台的js或java代码。

下面在main的目录下加入二个文件，分别为Top.js和Bottom.js。目录结构如下：

Top.js定义了一个类，其类名为‘app.view.main.region.Top’，注意其类名的前面和其路径是一致的。extjs的类加载机制就是根据类名来找到具体的类文件在哪里的。

/**
 * 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮
 */
Ext.define('app.view.main.region.Top', {
 
            extend : 'Ext.toolbar.Toolbar',
 
            alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop
 
            items : [{
                        xtype : 'image',
                        bind : { // 数据绑定到MainModel中data的ystem.iconUrl
                            hidden : '{!system.iconUrl}', // 如果system.iconUrl未设置，则此image不显示
                            src : '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
                        }
                    }, {
                        xtype : 'label',
                        bind : {
                            text : '{system.name}' // text值绑定到system.name
                        },
                        style : 'font-size : 20px; color : blue;'
                    }, {
                        xtype : 'label',
                        bind : {
                            text : '{system.version}'
                        }
                    }, '->', {
                        text : '菜单',
                        menu : [{
                                    text : '工程管理',
                                    menu : [{
                                                text : '工程项目'
                                            }, {
                                                text : '工程标段'
                                            }]
                                }]
                    }, ' ', ' ', {
                        text : '主页'
                    }, {
                        text : '帮助'
                    }, {
                        text : '关于'
                    }, {
                        text : '注销'
                    }, '->', '->', {
                        text : '设置'
                    }]
 
        });

上面是Top.js类的定义，这是一个toolbar控件，里面加入了一些label和Button,用于显示系统名称以及用来实现一些操作。toolbar的items下默认的xtype是Button。源代码的注释里面也写入了如何绑定到MainModel 的数据的备注。

下面是Button.js的代码：

/**
 * 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息
 */
Ext.define('app.view.main.region.Bottom', {
 
            extend : 'Ext.toolbar.Toolbar',
 
            alias : 'widget.mainbottom',
 
            items : [{
                        bind : {
                            text : '使用单位:{user.name}'
                        }
                    }, {
                        bind : {
                            text : '用户:{user.name}'
                        }
                    }, '->', {
                        bind : {
                            text : '服务单位:{service.company}'
                        }
                    }, {
                        bind : {
                            text : '服务人员:{service.name}'
                        }
                    }, {
                        bind : {
                            text : 'tel:{service.phonenumber}'
                        }
                    }, {
                        bind : {
                            hidden : '{!service.email}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
                            text : 'eMail:{service.email}'
                        }
                    }, {
                        bind : {
                            text : '©{service.copyright}'
                        }
                    }]
        });

至此要加入的二个js文件已经就绪，现在我们要把他们放到Main的主页面之中。Main.js也需要修改一下，需要引入上面这二个类，以及把他们放到items下，并设置好位置。

/**
 * This class is the main view for the application. It is specified in app.js as
 * the "autoCreateViewport" property. That setting automatically applies the
 * "viewport" plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your
 * application.
 */
Ext.define('app.view.main.Main', {
    extend : 'Ext.container.Container',
 
    xtype : 'app-main',
 
    uses : ['app.view.main.region.Top', 'app.view.main.region.Bottom'],
 
    controller : 'main',
    // MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
    // 这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了
    viewModel : {
        type : 'main'
        // MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
    },
 
    layout : {
        type : 'border' // 系统的主页面的布局
    },
 
    items : [{
                xtype : 'maintop',
                region : 'north' // 把他放在最顶上
            }, {
                xtype : 'mainbottom',
                region : 'south' // 把他放在最底下
            }, {
                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>'
                        }]
            }]
});

extjs中有许多布局，其中的一个border比较常用，他可以将items分成上、下、左、右、和中间五个部分。经过上面几步以后，在浏览器刷新一下网页，会看到如下结果：