折线图区域填充定义方式变更

kanban-console/src/main/webapp/resources/app/view/core/trigger/LineAreaStyleTrigger.js

@@ -16,94 +16,120 @@ Ext.define('erp.view.core.trigger.LineAreaStyleTrigger', {
         var legendEditor = Ext.create('Ext.window.Window', {
             field: trigger,
             title: trigger.fieldLabel,
-            width: 360,
+            width: 420,
             height:320,
             modal:true,
             layout:'border',
             items: [{
-                xtype:'form',
-                region: 'center',
-                bodyPadding: 10,
-                autoScroll: true,
-                layout: 'column',
-                defaults: {
-                	padding: '0 10 10 10',
-                	width: 300
-                },
-                items: [{
-                	xtype: 'combobox',
-                	fieldLabel: '渐变方向',
-                	name: 'type',
-                	listConfig: {
-                        maxHeight: 120
-                    },
-                    store: Ext.create('Ext.data.Store', {
-                        fields: ['value', 'name'],
-                        data : [
-                        	{ name: '无渐变', value: 'null' },
-                            { name: '横向渐变', value: 'horizontal' },
-                        	{ name: '纵向渐变', value: 'vertical' }
-                        ]
-                    }),
-                    queryMode: 'local',
-                    displayField: 'name',
-                    valueField: 'value',
-                    emptyText: '无渐变',
-                    listeners: {
-                    	change: function(f, v) {
-                    		var form = f.up('form');
-                			var colorField = form.getForm().findField('color');
-                			var colorsField = form.getForm().findField('colors');
-                			
-                    		if(v == 'null') {
-                    			colorsField.setValue(null);
-                    			colorField.setVisible(true);
-                    			colorsField.setVisible(false);
-                    		}else {
-                    			colorField.setValue(null);
-                    			colorField.setVisible(false);
-                    			colorsField.setVisible(true);
-                    		}
-                    	}
+            	xtype: 'grid',
+            	region: 'center',
+            	autoScroll: true,
+            	plugins: [
+                    Ext.create('Ext.grid.plugin.CellEditing', {
+                        clicksToEdit: 2
+                    })
+                ],
+            	tbar: [{
+                    xtype: 'button',
+                    text: '添加',
+                    handler: function (btn) {
+                    	var grid = btn.ownerCt.ownerCt;
+                    	grid.getStore().add({
+                    		enable: 'true',
+                    		gradient: 'null',
+                    		opacity: 1
+                    	});
                     }
-				}, {
-                    xtype: 'colorpooltrigger',
-                    fieldLabel: '<font title="为每条折线设置单独的填充色，默认取折线颜色">颜色</font>',
-                    name: 'color',
-                    emptyText: 'auto'
                 }, {
-                    xtype: 'doublecolorpooltrigger',
-                    fieldLabel: '<font title="为每条折线设置单独的填充色(包括渐变的起止颜色)，默认取折线颜色">颜色</font>',
-                    hidden: true,
-                    name: 'colors',
-                    emptyText: 'auto'
-                }, {
-                	xtype: 'numberfield',
-                	fieldLabel: '透明度',
-                    name: 'opacity',
-                    minValue: 0,
-                    maxValue: 1,
-                    step: 0.1,
-                    emptyText: '1'
+                    xtype: 'button',
+                    text: '删除',
+                    handler: function (btn) {
+                        var grid = btn.ownerCt.ownerCt;
+	                    var record = grid.getSelectionModel().getSelection()[0];
+	                    grid.getStore().remove(record);
+                    }
                 }],
-                setConfig: function(configObj) {
-                    var form = this;
-                    var o = {
-                        data: Object.assign({}, configObj),
-                        getData: function() {return this.data}
-                    };
-                    form.loadRecord(o);
+                store: Ext.create('Ext.data.Store', {
+                	fields: ['enable', 'color', 'gradient', 'opacity'],
+                	data: []
+                }),
+            	columns: [{
+            		text: '启用',
+            		dataIndex: 'enable',
+            		editor: {
+            			xtype: 'combobox',
+            			mode: 'local',
+            			valueField: 'value',
+            			displayField: 'name',
+            			editable: false,
+            			store: Ext.create('Ext.data.Store', {
+				            fields: ['value', 'name'],
+				            data: [
+				                { "value": 'true', "name": "是" },
+				                { "value": 'false', "name": "否" }
+				            ]
+				        })
+            		},
+			        renderer: function(v) {
+			        	return v == 'true' ? '是' : '否'
+			        }
+            	}, {
+            		text: '颜色',
+            		dataIndex: 'color',
+            		editor: 'colorpicker',
+                    renderer: function(value,a) {
+                    	if(!value) {
+                    		return '';
+                    	}
+                    	var RgbValue = color2Rgb(value);
+                    	var fontColor = isDeepColor(RgbValue) ? 'white' : 'black';
+                    	
+                    	a.style += ' background-color:'+value+';color:'+fontColor+';';
+                    	return value;
+                    }
+            	}, {
+            		text: '渐变',
+            		dataIndex: 'gradient',
+            		editor: {
+            			xtype: 'combobox',
+            			mode: 'local',
+            			valueField: 'value',
+            			displayField: 'name',
+            			editable: false,
+            			store: Ext.create('Ext.data.Store', {
+				            fields: ['value', 'name'],
+				            data: [
+				                { "value": "null", "name": "纯色" },
+				                { "value": "vertical", "name": "纵向渐变" },
+				                { "value": "horizontal", "name": "横向渐变" }
+				            ]
+				        })
+            		},
+			        renderer: function(v) {
+			        	return v == 'horizontal' ? '横向渐变' : (v == 'vertical' ? '纵向渐变' : '纯色')
+			        }
+            	}, {
+            		text: '透明度',
+            		dataIndex: 'opacity',
+            		editor: {
+            			xtype: 'numberfield',
+            			minValue: 0,
+	                    maxValue: 1,
+	                    step: 0.1
+            		}
+            	}],
+            	setConfig: function(configObj) {
+                    var grid = this;
+                    var store = grid.store;
+                    
+                    store.loadData(configObj);
                 },
                 getConfig: function() {
-                    var form = this;
-                    var config = form.getForm().getValues();
-                    configObj = {};
-                    for(var key in config) {
-                        if(config[key]) {
-                        	configObj[key] = config[key];
-                        }
-                    }
-                    return configObj;
+                    var grid = this;
+                    var store = grid.store;
+                    var data = store.data.items.map(function(x) {return x.data});
+                    
+                    return data;
                 }
             }],
             buttonAlign: 'center',
@@ -112,46 +138,7 @@ Ext.define('erp.view.core.trigger.LineAreaStyleTrigger', {
                 formBind:true,
                 handler:function(btn){
                     var win = btn.ownerCt.ownerCt;
-                    var componet = Ext.getCmp(win.field.ownerCt.el.dom.parentNode.id);
-                    if(componet) {
-                        var grid = componet;
-                        var fieldname = win.field.column.dataIndex;
-                        var selections = grid.getSelectionModel().getSelection();
-                        var store = grid.getStore();
-                        var selected = selections[0];
-                        selected.set(fieldname, Ext.JSON.encode( win.getConfig() ) );
-                        var rowIndex = store.indexOf(selected);
-                        var colIndex = 0;
-                        var columns = grid.columnManager.columns;
-                        for(var i = 0; i < columns.length; i ++) {
-                            var column = columns[i];
-                            if(column.dataIndex == fieldname) {
-                                colIndex = i;
-                                break;
-                            }
-                        }
-
-                        var getPropConfigByRecord = function(records) {
-                            var propConfig = new Array();
-                            var obj;
-                            Ext.Array.each(records,function(record){
-                                obj = new Object();
-                                obj.display = record.get('display');
-                                obj.property = record.get('property');
-                                obj.propvalue = record.get('propvalue');
-                                propConfig.push(obj);
-                            });
-                            return propConfig;
-                        }
-
-                        var detailGrid = Ext.getCmp('elementdetailgrid');
-                        var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
-                        detailSelect.set('propconfig',getPropConfigByRecord(grid.store.data.items));
-
-                        grid.getPlugin().startEditByPosition({row: rowIndex, column: colIndex});
-                    }else {
-                        win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
-                    }
+                    win.field.setValue( Ext.JSON.encode( win.getConfig() ) );
                     win.close();
                 }
             },{
@@ -169,14 +156,14 @@ Ext.define('erp.view.core.trigger.LineAreaStyleTrigger', {
             },
             setConfig: function(configStr) {
                 var me = this;
-                var form = me.down('form');
-                var configObj = Ext.JSON.decode(configStr || '{}');
-                form.setConfig(configObj);
+                var grid = me.down('grid');
+                var configObj = Ext.JSON.decode(configStr || '[]');
+                grid.setConfig(configObj);
             },
             getConfig: function() {
                 var me = this;
-                var form = me.down('form');
-                return form.getConfig();
+                var grid = me.down('grid');
+                return grid.getConfig();
             }
         });
         legendEditor.show();