19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

时间：2022-07-19 02:11:38

经过对自定义模块和Grid的设计和编码，现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作。由于这是一个全解释性的前台的架构，因此你想到的任何新主意都可以放到所有的模块中。

比如对于“Grid列宽的自动适应”这个功能，我们可以在系统设置项里加入“列宽自适应模式”，下面有三个选项：1、不自动适应；2、首次加载数据时自动适应；3､每次加载数据都自动适应。因为列宽自动适应需要时间，如果字段很多，记录很多会比较慢，因此可以加入这个设置，使用户根据自己的喜好来设置。还可以对每种类型的字段做一些设置，比如日期的显示格式、浮点型的数值要不要加分节符号，小数位数，颜色等等。

下面再介绍一个使用MVVM特性的小功能，在title上显示当前选中的记录的nameField。先截图看看效果：

19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

下面具体的修改，先在Grid.js中将bind的语句改一下

bind : {

        title : '{tf_title} {selectedNames}' // 数据绑定到ModuleModel中的tf_title 和

    // 选中记录的名称

},

然后再在 ModuleModel.js中的data中加入属性：

selectedNames: ''   //选中的记录的names显示在title上

Grid的记录选中事件在前几节中已经加了，只要修改一下事件函数就可以了，修改ModuleController.js

// 选中的记录发生变化过后的事件

selectionChange : function(model, selected, eOpts) {

    // 设置删除按钮的状态

    this.getView().down('toolbar button#delete')[selected.length > 0

            ? 'enable'

            : 'disable']();

    var viewModel = this.getView().getViewModel();

    // 下面将组织选中的记录的name显示在title上，有二种方案可供选择，一种是用下面的MVVM特性，第二种是调用refreshTitle()

    var selectedNames = ''

    if (selected.length > 0) {

        if (!!selected[0].getNameValue())

            selectedNames = selectedNames + '　『<em>' + selected[0].getNameValue()

                    + '</em>'

                    + (selected.length > 1 ? ' 等' + selected.length + '条' : '') + '』';

    }

    viewModel.set('selectedNames', selectedNames); // 修改ModuleModel中的数据，修改好后会自动更新bind的title

    // this.getView().down('grid').refreshTitle(); // 这是不用MVVM特性的做法

},

相关文章