Extjs4.0 动态列生成

1.数据样式

devices:[]  数组

insuranceName	null
deviceName	电梯设备
classNo	010000
total	36

 

2.extjs panel  grid

{
                text : "设备分类",
                id:'list_device_category',
                columns:[]
            },

3.extjs model

{name:'devices',type:'object'},

4.extjs store listeners

load: {
                    fn: function(Store ,records,successful,eOpts){
                        let deviceArr = [];
                        if(successful && records.length > 0){
                            for(let i = 0;i < records[0].data.devices.length;i++){
                                let deviceName = records[0].data.devices[i].deviceName;
                                deviceArr.push(
                                    {
                                        text : deviceName,
                                        align : 'center',
                                        dataIndex : 'device_'+i,
                                        width : deviceName.length < 6 ? 19*deviceName.length : 14*deviceName.length,
                                        renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                            var mss = record.data.devices[i];
                                            if (mss != null && mss != "" && mss != undefined) {
                                                return mss.total;
                                            }
                                            return null;
                                        }
                                    }
                                );
                            }
                            deviceArr.push(//这是多增加的一列数据
                                {
                                    text : "合计",
                                    align : 'center',
                                    dataIndex : 'deviceTotal',
                                }
                            );
                        }
                        Ext.getCmp('list_device_category').add(
                            deviceArr
                        );
                        Store.loadRecords(records);//会重新加载一次，上面修改后会重新排列
                    }
                },

5.效果

（图片太难发）