Ext Js Grid实现动态添加列

最近工作中，客户要求实现自定义列的效果，可根据设置进行页面表格的动态加载，数据库中列的存储方式为单行对应表格中的单列

数据库查询列集合

--由于Oracle默认对查询结果的key进行转大写处理，但Extjs中列的属性不符合要求，故加对查询结果的列增加别名""
select id "dataIndex", col_header "header", 'end' "align",ColumnAttribute "ColumnAttribute" from grid_columns order by sort asc;

Extjs实现动态列效果，可根据实际需要进行扩展

Ext.define('ExtApp.view.cost.HandmadeBoxGrid', {
    extend: 'ExtApp.widget.grid.GridPanel',//项目中对原有Grid进行封装，大家可直接继承Extjs本身的Grid 'Ext.grid.Panel'
    xtype: 'handmadeBoxGrid',
    sortableColumns: false,//禁止点击排序
    enableColumnHide: false,//禁用此网格中的列隐藏
    enableColumnMove: false,//禁用此网格内的列拖动
    //dynamicDisplayColumn: false,//项目中扩展属性，用户动态表格列
    //isCacheColumns: false,//项目中扩展属性，是否缓存列
    initComponent: function () {
        var me = this;
        me.store = new ExtApp.store.cost.HandmadeBoxStore();
        me.tbar = [{
            xtype: 'monthfield',
            valueFormat: 'Ym',//值格式
            emptyText: '请选择年月',
            reference: 'handmadeBoxMonth',
            listeners: {
                //change: 'onHandmadeBoxMonthChange',年月值改变后进行查询展示
            }
        }, {
            xtype: "searchButton",
            handler: 'onHandmadeBoxMonthSearchClick',
        }];
        me.callParent(arguments);
        me.addDynamicallyColumn();
    },
    //动态添加列
    addDynamicallyColumn: function (columns) {
        var me = this;
        var cols = [];
        if (columns && columns.length > 0) {
            Ext.Array.forEach(columns, function (column) {
                column.minWidth = 100;
                var attribute = column.ColumnAttribute;//自定义的列属性，展示不同的格式
                if (attribute == 2) {
                    //数值，默认保留两位小数
                    column.renderer = function (value) {
                        if (value) {
                            return parseFloat(value).toFixed(2);
                        }
                        return '';
                    }
                } else if (attribute == 3) {
                    column.xtype = 'moneycolumn';
                } else if (attribute == 4) {
                    //百分比，默认保留两位小数
                    column.renderer = function (value) {
                        if (value) {
                            return ExtApp.util.Number.floatMul(parseFloat(value || 0).toFixed(4), 100) + "%";//自定义的乘法
                        }
                        return '';
                    }
                } else {
                    //文本
                    column.renderer = function (value) {
                        return value ? value : '';
                    }
                }
                delete column.attribute;
                cols.push(column);
            });
        }
        me.reconfigure(me.getStore(), cols);
    },
});



//Controller中根据实际情况进行加载 data为后台Sql查询结果
//1、获取grid对象
var handmadeBoxGrid = me.lookupReference('handmadeBoxGrid');
//2、调用动态列加载的方法实现
handmadeBoxGrid.addDynamicallyColumn(data);