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.view.module.ModuleModel', 'app.view.module.factory.ModelFactory'],

    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.model = app.view.module.factory.ModelFactory.getModelByModule(this
                .getViewModel());

        console.log(this.model);

        this.store = Ext.create('Ext.data.Store', {
            model: this.model,
            autoLoad: true,
            proxy: {
                type: 'localstorage',
                id: 'module' + '__' + this.getViewModel().get('tf_moduleName')
            }
        })

        this.items = [{
            xtype: 'navigate', // 导航区域
            region: 'west',
            width: 250,
            collapsible: true,
            split: true
        }, {
            xtype: 'modulegrid', // 模块的grid显示区域
            region: 'center',
            store: this.store
        }, {
            xtype: 'recorddetail', // 记录明细
            region: 'east',
            width: 250,
            collapsible: true, // 可以折叠隐藏
            collapseMode: 'mini', // 折叠陷藏模式
            split: true
            // 可以拖动大小
        }]

        this.callParent();
    }

})

在Module.js中，根据modelFactory创建model，并且创建一个Store,使用了自动生成的model，由于现在还没有和后台建立关系，因此先把数据存在本地数据中。见下面的代码，type:'localstorage'，就是使用本地存贮来存放数据。

this.store = Ext.create('Ext.data.Store', {
    model: this.model,
    autoLoad: true,
    proxy: {
        type: 'localstorage',
        id: 'module' + '__' + this.getViewModel().get('tf_moduleName')
    }
})

Grid.js中也修改：

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

Ext.define('app.view.module.region.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.modulegrid',
    uses: ['app.view.module.region.GridToolbar',
            'app.view.module.factory.ColumnsFactory'],
    bind: {
        title: '{tf_title}' // 数据绑定到ModuleModel中的tf_title
    },
    dockedItems: [{
        xtype: 'gridtoolbar', // 按钮toolbar
        dock: 'top'
    }],
    columnLines: true, // 加上表格线
    viewConfig: {
        stripeRows: true, // 奇偶行不同底色
        enableTextSelection: true
    },
    initComponent: function () {
        var viewModel = this.up('modulepanel').getViewModel();
        // 创建grid列
        this.columns = app.view.module.factory.ColumnsFactory.getColumns(
                viewModel, 10);
        this.callParent();
    }
})

在Grid中加入columns 即可。经过以上步骤，可以展示界面了。

下面手动增加几条记录，给新增按钮增加一个事件执行，在GridToolbar的“新增“下面增加 handler :'addRecord',

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

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')
    },

    addRecord: function () {
        var grid = this.getView().down('modulegrid');
        var model = Ext.create(grid.getStore().model);
        model.set('tf_id', 1);
        model.set('tf_name', '太湖花园小区建设');
        model.set('tf_code', '2004-01');
        model.set('tf_squaremeter', 12000);
        model.set('tf_budget', 3800000);
        model.set('tf_rjl', 0.67);
        model.set('tf_startDate', new Date());
        model.set('tf_endDate', new Date());
        model.set('tf_isValid', false);
        model.set('tf_m3', 1239.24);

        grid.getStore().add(model);
        console.log(model);
        grid.getStore().sync();
    }

})

点击几下“新增“按钮，点入几条记录。