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

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

先来看一下新增一个方案的配置信息，在ModuleModel.js中，修改tf_gridSchemes为以下内容：

// 模块的grid方案，可以定义多个方案
tf_gridSchemes: [{
    tf_schemeOrder: 10,
    tf_schemeName: ‘Grid方案1‘, // 第一个grid方案
    // 表头分组
    tf_schemeGroups: [{
        tf_gridGroupId: 1, // id号
        tf_gridGroupOrder: 10, // 表头分组序号
        tf_gridGroupName: ‘工程项目基本信息‘,
        tf_isShowHeaderSpans: true, // 是否显示分组
        tf_isLocked: true, // 是否锁定此分组
        // 每一个表头分组下面的字段
        tf_groupFields: [{
            tf_gridFieldOrder: 5,
            tf_fieldId: 10100010
            // 工程id号
        }, {
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100020, // 工程项目名称字段
            tf_columnWidth: 200
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100030, // 工程项目编码字段
            tf_columnWidth: 120
        }]
    }, {
        tf_gridGroupOrder: 20, // 表头分组序号
        tf_gridGroupName: ‘工程项目附加信息‘,
        tf_isShowHeaderSpans: false, // 是否显示headerspan
        tf_isLocked: false, // 是否锁定此分组
        tf_groupFields: [{
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100040
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100050
        }, {
            tf_gridFieldOrder: 30,
            tf_fieldId: 10100060
        }, {
            tf_gridFieldOrder: 40,
            tf_fieldId: 10100070
        }, {
            tf_gridFieldOrder: 50,
            tf_fieldId: 10100080
        }, {
            tf_gridFieldOrder: 60,
            tf_fieldId: 10100090, // 是否通过验收
            tf_columnWidth: 80
        }, {
            tf_gridFieldOrder: 70,
            tf_fieldId: 10100100,
            tf_columnWidth: -1,  // －1表示这我可以撑足最大宽度
            tf_autoSizeDisabled: true // 不许自动适应宽度
            // 工程方量
        }]
    }]

}, {
    tf_schemeOrder: 20,
    tf_schemeName: ‘Grid方案2‘, // 第二个grid方案
    tf_schemeGroups: [{
        tf_gridGroupId: 1, // id号
        tf_gridGroupOrder: 10, // 表头分组序号
        tf_gridGroupName: ‘工程项目主要信息‘,
        tf_isShowHeaderSpans: false, // 是否显示分组
        tf_isLocked: false, // 是否锁定此分组
        tf_groupFields: [{
            tf_gridFieldOrder: 5,
            tf_fieldId: 10100010,
            tf_isLocked: true
        }, {
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100020, // 工程项目名称字段
            tf_columnWidth: 200,
            tf_isLocked: true
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100030, // 工程项目编码字段
            tf_columnWidth: 120,
            tf_isLocked: true

        }, {
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100040
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100050
        }]
    }]
}, {
    tf_schemeOrder: 30,
    tf_schemeName: ‘Grid方案3‘, // 第三个grid方案
    // 表头分组
    tf_schemeGroups: [{
        tf_gridGroupId: 1, // id号
        tf_gridGroupOrder: 10, // 表头分组序号
        tf_gridGroupName: ‘工程项目基本信息‘,
        tf_isShowHeaderSpans: true, // 是否显示分组
        tf_isLocked: true, // 是否锁定此分组
        tf_groupFields: [{
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100020, // 工程项目名称字段
            tf_columnWidth: 200
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100030, // 工程项目编码字段
            tf_columnWidth: 120
        }]
    }, {
        tf_gridGroupOrder: 20, // 表头分组序号
        tf_gridGroupName: ‘工程项目附加信息‘,
        tf_isShowHeaderSpans: true, // 是否显示headerspan
        tf_isLocked: false, // 是否锁定此分组
        tf_groupFields: [{
            tf_gridFieldOrder: 10,
            tf_fieldId: 10100040
        }, {
            tf_gridFieldOrder: 20,
            tf_fieldId: 10100050
        }, {
            tf_gridFieldOrder: 30,
            tf_fieldId: 10100060
        }, {
            tf_gridFieldOrder: 40,
            tf_fieldId: 10100070
        }, {
            tf_gridFieldOrder: 50,
            tf_fieldId: 10100080
        }]
    }]

}]

在上面定义了三个gridScheme的方案，名称分别为“grid方案1”，“grid方案2”，“grid方案3”，每个方案下面又对字段分组，有些分组设置成了可以显示的二层表头，有些不显示多层表头，还设置了前面几列可以列锁定。数据有了，然后从Combo字段继承新建一个控件，用来可以选择这三个方案。在app/view/module下建立一个文件夹widget，将模块中用到的控件都放在这个下面。在widget目录中建立文件GridSchemeCombo.js。

/**
 * 如果一个模块有多个Grid方案，那么在 pading上增加一个可以选择切换方案的Combo
 */

Ext.define(‘app.view.module.widget.GridSchemeCombo‘, {
    extend: ‘Ext.form.field.ComboBox‘,
    alias: ‘widget.gridschemecombo‘,
    fieldLabel: ‘方案‘,
    editable: false,
    labelWidth: 40,
    labelAlign: ‘right‘,
    width: 200,
    queryMode: ‘local‘,
    displayField: ‘tf_schemeName‘, // data 中列表主案的名称
    valueField: ‘tf_schemeOrder‘, // data 中列表主案的序号
    hidden: true, // 默认不显示，如果GridScheme的个数大于1则显示。
    bind: {
        hidden: ‘{gridSchemeHidden}‘, // 这是data中的一个计算字段，根据gridscheme个数来判断此控件是否显示
        value: ‘{gridSchemeId}‘ // 绑定gridSchemeId的值，在grid中，也绑定此值，这里改变以后，会去执行grid中的绑定事件
    },
    initComponent: function () {
        // 取得最顶层容器的viewModel,如果有更好的办法取得，请告知，谢谢
        var viewModel = this.up(‘modulepanel‘).getViewModel();
        this.store = Ext.create(‘Ext.data.Store‘, {
            fields: [‘tf_schemeOrder‘, ‘tf_schemeName‘],
            data: viewModel.get(‘tf_gridSchemes‘)
        });
        this.value = viewModel.get(‘tf_gridSchemes‘)[0].tf_schemeOrder; // 默认的方案为第一个
        this.callParent(arguments);
    }
});

下面要在Grid的导航区域中加入此控件。先在uses中引入上面的控件，再修改bind，这样设置了bind 后，上面控件在选择了另一个方案以后，会来执行grid中的 setGridSchemeId这个函数，这个其实就是MVVM的本质。

bind : {
        title : ‘{tf_title} {selectedNames}‘, // 数据绑定到ModuleModel中的tf_title和选中记录的名称
        gridSchemeId : ‘{gridSchemeId}‘ // 属性gridSchemeId
    // 设置绑定，和GridSchemeCombo是value绑定是一样的
},

下面加入改变了方案以后的执行函敉：

setGridSchemeId : function(value) {
    if (this.gridSchemeId != value) {
        this.gridSchemeId = value;
        Ext.suspendLayouts();
        this.columns = app.view.module.factory.ColumnsFactory.getColumns(this
                        .up(‘modulepanel‘).getViewModel(), value);
        this.reconfigure(this.store, this.columns);
        Ext.resumeLayouts(true);
        this.columnAutoSize();
    }
},

在pagingtoolbar中加入此控件：

// 创建grid列
// 默认第一个grid方案
this.gridSchemeId = viewModel.get(‘tf_gridSchemes‘)[0].tf_schemeOrder;
// 将第一个方案的columns生成，第一个方案是要先设置好，并不是gridschemecombo触发来生成的
this.columns = app.view.module.factory.ColumnsFactory.getColumns(viewModel);

this.dockedItems = [{
    xtype: ‘gridtoolbar‘, // 按钮toolbar
    dock: ‘top‘,
    grid: this
}, {
    xtype: ‘pagingtoolbar‘, // grid数据分页
    store: this.store,
    displayInfo: true,
    prependButtons: true,
    dock: ‘bottom‘,
    items: [{ // 在最前面加入grid方案的选择Combo
        xtype: ‘gridschemecombo‘
    }]
}];

ColumnsFactory.js的前面一部分也修改过了：

/**
 * 用于生成Grid的Columns的类
 */

Ext.define(‘app.view.module.factory.ColumnsFactory‘, {

    statics : {
        getColumns : function(moduleModel, schemeOrderId) {
            var scheme = moduleModel.get(‘tf_gridSchemes‘)[0]; // 取得第一个grid的方案
            if (schemeOrderId) { // 查找到相应的scheme
                Ext.Array.each(moduleModel.get(‘tf_gridSchemes‘), function(s) {
                    if (s.tf_schemeOrder == schemeOrderId) {
                        scheme = s;
                        return false;
                    }
                })
            }
            var columns = [];

为了加这个功能，改了许多处代码，又遇到了很多的bug，大家在切换方案的时候就会看到bug了。经过以上的操作，在模块打开的时候，可以看到在pagingtoolbar上多了一个控件，可以选择来改变grid的column方案了。这个改变方案的步骤也是应用MVVM的特性，上面的代码中没有看到事件的执行代码，因为事件在bind后是自动去执行的。

下面贴一下加入此功能后的截图。

选择了第二个方案后

选择了第三个方案后

对于一个管理系统来说，你的grid有以上几节所写的功能，系统的档次立马提高不少。但是在你没有理解的情况下不要盲目加入，要对系统的设计到功能的内部操作过程都了解了再加入相应功能。这套自定义的系统中完全没有重复的界面类，每一个类都是为了完成新的功能而建立的，到现在这节为止是手工建立了20多个类来协同工作，内部流程已经非常复杂了。等这个系统完全做好，前台会有200多个自定义类，后台也有几百个控制类，没有一定的编程功底和设计能力的话就很难掌控。再加上功能越深入，extjs的bug就会出现的越多，这真是一个头疼的问题。

Grid的操作暂时告一段落，从下面会开始加入自定义Form、自定义图表的开发过程。

时间： 2024-04-25 19:43:43

20、手把手教你Extjs5（二十）模块Grid的多列表方案的相关文章

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

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

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

经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1.不自动适应:2.首次加载数据时自动适应:3?每次加载数据都自动适应.因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置.还可以对每种类型的字

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

15、手把手教你Extjs5（十五）各种Grid列的自定义渲染

Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色,0不显示. 2.浮点型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色,显示二位小数,0不显示. 3.货币型:同浮点型,但是可以选择不同的单位,如元,千元,万元,百万元,亿元.数据有分节显示. 4.百分比型:自定义的一个百分比的显示,有数值和图像来形象的表示百分比. 5.日期型:显示格式为

16、手把手教你Extjs5（十六）Grid金额字段单位MVVM方式的选择

这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位的数据和生成菜单的items. /** * 金额单位的管理类 */ Ext.define('app.view.main.menu.Monetary', { statics: { values: null, getAllMonetary: function () { if (!this.values)

跟我一起学extjs5(21--模块Grid的多列表方案)

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

21、手把手教你Extjs5（二十一）模块Form的自定义的设计

前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1?可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能: 2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改. 3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer). 4?每个字段分组中可以放置若干个字段. 5?每个Form方案可

22、手把手教你Extjs5（二十二）模块Form的自定义的设计[1]

下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段. // 模块的form方案,可以定义多个方案 tf_formSchemes: [{ tf_schemeOrder: 10, t

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

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