|
|
@@ -0,0 +1,232 @@
|
|
|
+/**
|
|
|
+ * chart取色池设置-两个值
|
|
|
+ */
|
|
|
+Ext.define('erp.view.core.trigger.DoubleColorPoolTrigger', {
|
|
|
+ extend: 'Ext.form.field.Trigger',
|
|
|
+ alias: 'widget.doublecolorpooltrigger',
|
|
|
+ triggerCls: 'colorpool-trigger-icon',
|
|
|
+ onTriggerClick: function () {
|
|
|
+ var trigger = this;
|
|
|
+ try {
|
|
|
+ var arr = Ext.JSON.decode(trigger.getValue() || '[]');
|
|
|
+ if(!(arr instanceof Array)) {
|
|
|
+ showErrorMsg('失败', '格式有误！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var success = true;
|
|
|
+ Ext.Array.each(arr, function(a) {
|
|
|
+ if(!isColorValue(a[0]) || !isColorValue(a[1])) {
|
|
|
+ success = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if(!success) {
|
|
|
+ showErrorMsg('失败', '格式有误！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }catch(e) {
|
|
|
+ showErrorMsg('失败', '格式有误！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var legendEditor = Ext.create('Ext.window.Window', {
|
|
|
+ field: trigger,
|
|
|
+ title: trigger.fieldLabel,
|
|
|
+ width: 320,
|
|
|
+ height: 320,
|
|
|
+ modal: true,
|
|
|
+ cls: 'x-colorpool-window',
|
|
|
+ layout: 'border',
|
|
|
+ items: [{
|
|
|
+ xtype: 'grid',
|
|
|
+ region: 'center',
|
|
|
+ store: Ext.create('Ext.data.JsonStore', {
|
|
|
+ fields: ['startColor', 'endColor'],
|
|
|
+ data: []
|
|
|
+ }),
|
|
|
+ autoScroll: true,
|
|
|
+ forceFit: true,
|
|
|
+ columnLines: true,
|
|
|
+// hideHeaders: true,
|
|
|
+ columns: [{
|
|
|
+ xtype: 'rownumberer'
|
|
|
+ }, {
|
|
|
+ text: '起始颜色',
|
|
|
+ dataIndex: 'startColor',
|
|
|
+ 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: 'endColor',
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ plugins: [
|
|
|
+ Ext.create('Ext.grid.plugin.CellEditing', {
|
|
|
+ clicksToEdit: 2
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ listeners: {
|
|
|
+ afterrender: function() {
|
|
|
+ var win = document.getElementsByClassName('x-colorpool-window')[0];
|
|
|
+ var body = win.getElementsByClassName('x-window-body')[0];
|
|
|
+ var panel = body.getElementsByClassName('x-panel')[0];
|
|
|
+
|
|
|
+ // 使colorpicker可以超出容器显示
|
|
|
+ body.style.overflow = 'visible';
|
|
|
+ panel.style.overflow = 'visible';
|
|
|
+ },
|
|
|
+ validateedit: function(editor, e) {
|
|
|
+ if(e.value != '' && !isColorValue(e.value)) {
|
|
|
+ showErrorMsg('警告', '这不是一个有效的颜色值！');
|
|
|
+ e.cancel = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rbar: [{
|
|
|
+ xtype: 'button',
|
|
|
+ text: '添加',
|
|
|
+ handler: function (btn) {
|
|
|
+ var grid = btn.ownerCt.ownerCt;
|
|
|
+ grid.getStore().add({
|
|
|
+ startColor: '',
|
|
|
+ endColor: ''
|
|
|
+ });
|
|
|
+ grid.getPlugin().startEditByPosition({ row: grid.getStore().getCount() - 1, column: 1 });
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ xtype: 'button',
|
|
|
+ text: '删除',
|
|
|
+ handler: function (btn) {
|
|
|
+ var grid = btn.ownerCt.ownerCt;
|
|
|
+ var record = grid.getSelectionModel().getSelection()[0];
|
|
|
+ grid.getStore().remove(record);
|
|
|
+ }
|
|
|
+ },'->', {
|
|
|
+ xtype: 'button',
|
|
|
+ text: '说明',
|
|
|
+ iconCls: 'x-info-icon',
|
|
|
+ tooltip: '图形优先从该色池中取色，未定义的项再从默认色池中取，支持多种色值格式'
|
|
|
+ }],
|
|
|
+ load: function () {
|
|
|
+ var grid = this;
|
|
|
+ var params = me.paramRecord.get('optionalValues') || [];
|
|
|
+ var record = params.map(function (p) {
|
|
|
+ return {
|
|
|
+ endColor: p[0],
|
|
|
+ endColor: p[1]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ grid.getStore().loadData(record);
|
|
|
+ },
|
|
|
+ getConfig: function () {
|
|
|
+ var grid = this;
|
|
|
+ var config = [];
|
|
|
+ Ext.Array.each(grid.getStore().data.items, function(item) {
|
|
|
+ if(item.data.startColor && item.data.endColor) {
|
|
|
+ config.push([item.data.startColor, item.data.endColor]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return config;
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ 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.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.close();
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '取消',
|
|
|
+ handler: function (btn) {
|
|
|
+ var win = btn.ownerCt.ownerCt;
|
|
|
+ win.close();
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ listeners: {
|
|
|
+ afterrender: function () {
|
|
|
+ var me = this;
|
|
|
+ me.setConfig(me.field.getValue());
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setConfig: function (configStr) {
|
|
|
+ var me = this;
|
|
|
+ var grid = me.down('grid');
|
|
|
+ var configObj = Ext.JSON.decode(configStr || '[]');
|
|
|
+ Ext.Array.each(configObj, function(obj) {
|
|
|
+ grid.getStore().add({
|
|
|
+ startColor: obj[0],
|
|
|
+ endColor: obj[1]
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getConfig: function () {
|
|
|
+ var me = this;
|
|
|
+ var grid = me.down('grid');
|
|
|
+ return grid.getConfig();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ legendEditor.show();
|
|
|
+ }
|
|
|
+});
|
zhuth
