【看板】增加配置边框属性的弹窗

kanban-console/src/main/webapp/resources/app/controller/board.js

@@ -8,7 +8,7 @@ Ext.define('erp.controller.board', {
 	'core.trigger.TextTrigger', 'core.trigger.StyleTrigger', 'core.trigger.GridRenderTrigger', 'core.trigger.FormRenderTrigger',
 	'core.trigger.LegendTrigger', 'core.trigger.PieTrigger', 'core.trigger.ColorPoolTrigger', 'core.trigger.ColorPicker', 'core.trigger.LineAreaStyleTrigger',
 	'core.trigger.BarTrigger', 'core.trigger.LineTrigger', 'core.trigger.ChartAreaTrigger', 'core.trigger.XAxisTrigger', 'core.trigger.YAxisTrigger',
-	'core.trigger.DoubleColorPoolTrigger', 'boardmodel.modelbackupgrid', 'core.field.FileField', 'boardmodel.LogoWin'
+	'core.trigger.DoubleColorPoolTrigger', 'boardmodel.modelbackupgrid', 'core.field.FileField', 'boardmodel.LogoWin','core.trigger.BorderTrigger'
     ],
     stores:['component'],
     init:function(){

kanban-console/src/main/webapp/resources/app/view/component/gridcomponent.js

@@ -30,6 +30,10 @@ Ext.define('erp.view.component.gridcomponent',{
 					fieldLabel: '行样式',
 					name: 'rowsstyle'
 				},{
+          xtype: 'bordertrigger',
+          fieldLabel: '边框样式',
+          name: 'borderstyle'
+        },{
 					xtype: 'gridrendertrigger',
 					fieldLabel: '显示',
 					name: 'allrender'

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

@@ -0,0 +1,166 @@
+Ext.define('erp.view.core.trigger.BorderTrigger', {
+  extend: 'Ext.form.field.Trigger',
+  alias: 'widget.bordertrigger',
+  triggerCls: 'style-trigger-icon-form',
+  onTriggerClick: function () {
+    var trigger = this;
+    try {
+      Ext.JSON.decode(trigger.getValue() || '{}');
+    } catch (e) {
+      showErrorMsg('失败', '样式格式有误！');
+      return;
+    }
+    var styleEditor = Ext.create('Ext.window.Window', {
+      field: trigger,
+      title: trigger.fieldLabel,
+      width: 320,
+      height: 320,
+      modal: true,
+      layout: 'border',
+      items: [{
+        xtype: 'form',
+        region: 'center',
+        bodyPadding: 10,
+        autoScroll: true,
+        items: [{
+          xtype: 'colorpicker',
+          fieldLabel: '边框颜色',
+          name: 'color'
+        }, {
+          xtype: 'combobox',
+          fieldLabel: '字体粗细',
+          name: 'borderStyle',
+          editable: false,
+          listConfig: {
+            maxHeight: 100
+          },
+          store: Ext.create('Ext.data.Store', {
+            fields: ['value', 'name'],
+            data: [
+              { name: '正常', value: 'solid' },
+              { name: '虚线', value: 'dashed' },
+              { name: '点线', value: 'dotted' }
+            ]
+          }),
+          queryMode: 'local',
+          displayField: 'name',
+          valueField: 'value',
+          emptyText: '正常',
+          value:'solid'
+        }, {
+          xtype: 'numberfield',
+          fieldLabel: '边框粗细',
+          name: 'borderSize',
+          minValue: 0,
+          emptyText: '默认'
+        }/*, {
+          xtype: 'texttrigger',
+          fieldLabel: '<font title="多个样式以分号;间隔">自定义</font>',
+          name: 'otherStyle'
+        }*/],
+        setStyle: function (styleObj) {
+          var styleForm = this;
+          if (JSON.stringify(styleObj) != '{}' && styleObj.hasOwnProperty('border')) {
+            var valArr = styleObj.border.split(' ');
+            var o = {
+              data: {
+                borderSize: valArr[0],
+                borderStyle: valArr[1],
+                color: valArr[2]
+              },
+              getData: function () {return this.data;}
+            };
+            styleForm.loadRecord(o);
+          }
+        },
+        getStyle: function () {
+          var styleForm = this,
+            color = styleForm.down('[name=color]'),
+            borderStyle = styleForm.down('[name=borderStyle]'),
+            borderSize = styleForm.down('[name=borderSize]'),
+            styleObj = {};
+          if (color.value && borderStyle.value) {
+            if (!borderSize.value) {
+              borderSize.value = 1;
+            }
+            styleObj.border = borderSize.value + 'px ' + borderStyle.value + ' ' + color.value;
+          }
+          return styleObj;
+        }
+      }],
+      buttonAlign: 'center',
+      buttons: [{
+        text: '确定',
+        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.getStyle()));
+            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.getStyle()));
+          }
+          win.close();
+        }
+      }, {
+        text: '取消',
+        handler: function (btn) {
+          var win = btn.ownerCt.ownerCt;
+          win.close();
+        }
+      }],
+      listeners: {
+        afterrender: function () {
+          var me = this;
+          me.setStyle(me.field.getValue());
+        }
+      },
+      setStyle: function (styleStr) {
+        var me = this;
+        var styleForm = me.down('form');
+        var styleObj = Ext.JSON.decode(styleStr || '{}');
+        styleForm.setStyle(styleObj);
+      },
+      getStyle: function () {
+        var me = this;
+        var styleForm = me.down('form');
+        return styleForm.getStyle();
+      }
+    });
+    styleEditor.show();
+  }
+});