4、手把手教你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: ‘[email protected]‘,
            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分成上、下、左、右、和中间五个部分。经过上面几步以后,在浏览器刷新一下网页,会看到如下结果:

时间: 11-20

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

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

为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ext.define('app.view.main.MainModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : { name : 'app', // 系统信息 system : { name : '工程项目合同

跟我一起学extjs5(05--主界面上加入顶部和底部区域)

跟我一起学extjs5(05--主界面上加入顶部和底部区域) 这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ext.define('app.view.main.MainModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : { name : 'app',

extjs5(05--主界面上加入顶部和底部区域)

这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. 1 Ext.define('app.view.main.MainModel', { 2 extend: 'Ext.app.ViewModel', 3 4 alias: 'viewmodel.main', 5 6 data: { 7 name: 'app', 8 9 // 系统信息 10 syste

手把手教你用git和SourceTree上传项目到github细解(转)

尊重原创:https://blog.csdn.net/qq_32365567/article/details/52859166 一.引言 我想大家现在都很熟悉github了,也能运用github上开源的项目到自己的项目中.但是我们也很想把自己的一些项目也放到github中开源供大家使用.这2天我就在研究这个东西,也查过很多资料都不是系统的,也走了很多的弯路毕竟一个初学者学习这几个软件,刚开始也不知道这两者有什么联系,纯粹靠自己瞎摸索,终于成功的上传到我的github里,好了闲话少说,干正事了,我

12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.Array.each(menuData, function(group) {

14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]

model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ Ext.define('app.view.module.Module', { extend: 'Ext.panel.Panel', alias: 'widget.modulepanel', requires: ['app.view.module.ModuleController', 'app.vi

24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]

自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分能自动生成就足够了,真正程序中有超级变态复杂的Form结构,可以自己

13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]

这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下ModuleModel.js中加入的新的定义: /** * 模块的数据模型 */ Ext.define('app.view.module.ModuleModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.module', // 在开发过程中

20、手把手教你Extjs5(二十)模块Grid的多列表方案

对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容设计了进去,在ModuleModel.js中,在data下面有个属性tf_gridSchemes为数组型,你有多少种方案,都定义在这个下面就可以了,然后再创建一个控件可以根据这些定义来进行方案的选择,选择好以后让grid重新配置新的方案即可. 先来看一下新增一个方案的配置信息,在ModuleMode