4、手把手教你Extjs5(四)主界面上加入顶部和底部区域

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
});

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: ‘设置‘
    }]

});

            /*
            *
 * 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息
 
            */
            
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}‘
        }
    }]
});

            /*
            *
 * 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>‘
        }]
    }]
});