11、手把手教你Extjs5（十一）模块界面的总体设计

上一节中设计了一些模块自定义中用到的要素，为了直观起见，这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个Grid，在其上方有个操作按钮的工具条，在左边有导航区域，在右边有一个记录明细的显示区域。下面即是一个例子：

下面我们来搭建这个界面，首先在view中建立目录module,在此目录下建立Module.js，ModuleController.js, moduleModel.js。这三个文件分别为模块的主界面，模块的控制器和模块的数据模型。然后在module下建立目录region,在这个目录下放置模块各个部分的控件，具体的控件和界面对应图如下：

下面来看看各个部分的代码：Module.js

/**
 * 一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系
 */
Ext.define('app.view.module.Module', {
    extend: 'Ext.panel.Panel',

    alias: 'widget.modulepanel',

    requires: ['app.view.module.ModuleController', 'app.view.module.ModuleModel'],

    uses: ['app.view.module.region.Navigate', 'app.view.module.region.Grid',
            'app.view.module.region.Detail'],

    controller: 'module',
    // MVVM架构的控制器的名称，main控制器会自动加载，这个控制器不会自动加载，需要在requires中指定，不知道是为什么
    viewModel: {
        type: 'module'
    },
    bind: {
        // glyph : '{tf_glyph}', // 这一个绑定是无效的，在tabPanel渲染过后，再修改这个值，将不会有任何效果。
        title: '{tf_title}' // 这个绑定是有效的，可以根据ModuleModel中的值来设置title
    },
    layout: 'border', // 模块采用border布局

    initComponent: function () {
        this.glyph = this.getViewModel().get('tf_glyph'); // 由于上面的glyph的bind无效，因此需要在这里加入glyph的设置
        this.items = [{
            xtype: 'navigate', // 导航区域
            region: 'west',
            width: 250,
            collapsible: true,
            split: true
        }, {
            xtype: 'modulegrid', // 模块的grid显示区域
            region: 'center'

        }, {
            xtype: 'recorddetail', // 记录明细
            region: 'east',
            width: 250,
            collapsible: true, // 可以折叠隐藏
            collapseMode: 'mini', // 折叠陷藏模式
            split: true
            // 可以拖动大小
        }]

        this.callParent();
    }

})

ModuleController.js

/**
 * 模块的控制器
 */

Ext.define('app.view.module.ModuleController', {
    extend: 'Ext.app.ViewController',

    requires: ['Ext.MessageBox', 'Ext.window.Toast'],

    alias: 'controller.module',

    init: function () {
        console.log('modulecontroller.init')
    }

})

ModuleModel.js

/**
 * 模块的控制器
 */

Ext.define('app.view.module.ModuleController', {
    extend: 'Ext.app.ViewController',

    requires: ['Ext.MessageBox', 'Ext.window.Toast'],

    alias: 'controller.module',

    init: function () {
        console.log('modulecontroller.init')
    }

})

　　

下面看看四个模块控件的源码：

Grid.js

/**
 * 模块数据的主显示区域，继承自Grid
 */

Ext.define('app.view.module.region.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.modulegrid',
    uses: ['app.view.module.region.GridToolbar'],
    bind: {
        title: '{tf_title}' // 数据绑定到ModuleModel中的tf_title
    },
    dockedItems: [{
        xtype: 'gridtoolbar', // 按钮toolbar
        dock: 'top'
    }],

    // 自定义字段的还没有做，先放几个固定的
    columns: [{
        dataIndex: 'tf_name',
        text: '工程项目名称',
        width: 250
    }, {
        dataIndex: 'tf_budget',
        text: '投资总额'
    }],
    store: new Ext.data.Store({
        fields: ['tf_name', {
            name: 'tf_budget',
            type: 'float'
        }],
        data: [{
            tf_name: '安居房建设工程',
            tf_budget: 1230000
        }, {
            tf_name: '道路建设工程',
            tf_budget: 453092
        }]
    })
})

GridToolbar.js

/**
 * 一个模块的grid上面显示的toolbar,里面放置了各种操作按钮 暂时还没有考虑到权限
 */
Ext.define('app.view.module.region.GridToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.gridtoolbar',
    uses: ['app.ux.GridSearchField'],
    initComponent: function () {
        this.items = [{
            text: '显示',
            glyph: 0xf022
        }, {
            text: '新增',
            xtype: 'splitbutton',
            glyph: 0xf016,
            menu: [{
                text: '复制新增',
                tooltip: '新增时先将当前记录添入到新记录中',
                glyph: 0xf0c5
            }, '-', {
                text: '上传Excel表单条新增',
                tooltip: '根据指定的excel表添好数据后，上传新增一条记录',
                glyph: 0xf062
            }, {
                text: '上传Excel表批量新增',
                tooltip: '根据下载的Excel表中的要求添加数据后，上传批量新增数据',
                glyph: 0xf062
            }]
        }, {
            text: '修改',
            glyph: 0xf044
        }, {
            text: '删除',
            glyph: 0xf014
        }, '-', {
            glyph: 0xf0c6,
            xtype: 'splitbutton',
            menu: [{
                text: '新增附件',
                icon: 'images/button/additionadd.png',
                glyph: 0xf093
            }, '-', {
                text: '预览所有附件',
                glyph: 0xf03e
            }, '-', {
                text: '下载所有附件',
                glyph: 0xf019
            }]
        }, {
            xtype: 'splitbutton',
            glyph: 0xf0ce,
            menu: [{
                text: '列表导出至excel',
                glyph: 0xf0ce
            }, '-', {
                text: '选中记录导出至excel',
                glyph: 0xf0ce
            }]
        }, {
            xtype: 'splitbutton',
            glyph: 0xf02f,
            menu: [{
                text: '打印当前页',
                glyph: 0xf02f
            }, {
                text: '打印所有记录',
                glyph: 0xf02f
            }]
        }, '-', '筛选', {
            width: 60,
            xtype: 'gridsearchfield',
            store: Ext.create('Ext.data.Store', {
                proxy: {
                    type: 'rest'
                }
            })
        }];
        this.callParent();
    }
})

Navigate.js

/**
 * 导航区域的主控界面,这是这个系统的核心控件之一
 */

Ext.define('app.view.module.region.Navigate', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.navigate',

    // glyph : 0xf0d0,
    title: '导航',

    initComponent: function () {

        this.callParent();
    }

})

Detail.js

/**
 * 选中了grid中的一条记录，显示明细的区域，放在右边
 */

Ext.define('app.view.module.region.Detail', {
    extend: 'Ext.grid.property.Grid',
    alias: 'widget.recorddetail',

    //glyph : 0xf0ca, //加了这一条，那个在最顶右侧可以隐藏此panel的按钮就不见，extjs真是bug一袋子，bug一屋子
    title: '记录明细',

    initComponent: function () {
        this.source = {
            '工程项目名称': 'title',
            '投资总额': 2929292
        }
        this.callParent();
    }

})