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.效果

（圖片太難發）