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

Ext.QuickTips.init();
Ext.define('erp.controller.board', {
    extend: 'Ext.app.Controller',
    views:['boardmodel.viewport','boardmodel.modeltree','boardmodel.modeleditpanel',
    'boardmodel.editcomponent','boardmodel.modelbuilderpanel','boardmodel.elementconfigpanel',
    'boardmodel.elementdetailgrid','boardmodel.detailpropertiesgrid','component.commonpanel','component.formcomponent',
	'component.gridcomponent','component.barcomponent','component.linecomponent','component.piecomponent',
	'core.trigger.TextTrigger', 'core.trigger.StyleTrigger', 'core.trigger.GridRenderTrigger', 'core.trigger.FormRenderTrigger',
	'boardmodel.modelbackupgrid'
    ],
    stores:['component'],
    init:function(){
    	var me = this;
    	me.formIndex = 1;
    	var formIndex = 1;
		var gridIndex = 1;
		
    	this.control({
    		'modelbuilderpanel':{
				afterrender: function(view) {
					var grid = Ext.getCmp('modeltree');
					grid.loadGridData();
				},
				afterlayout: function(view) {
					// 如果不是第一次进入界面则直接退出
					if(window.f == 1) {
						return;
					}
					window.f = 1;

					view.getEl().mask('loading...');
					Ext.Ajax.request({
						url:'kanban/get/' + modelCode,
						method:'POST',
						callback:function(options,success,response){
							view.getEl().unmask();
							var record = JSON.parse(response.responseText);
							try {
								view.modelRecord = record;
								record.get = function(key) {
									return this[key];
								};
								record.set = function(key, value) {
									this[key] = value;
								};
								view.fireEvent('repaintcomponent', view, record);
							}catch(e) {
								Ext.Msg.alert(e.name, e.message)
							}
						}
					});
				},
				repaintcomponent:function(view, record){
					var builderPanel = Ext.getCmp('modelbuilderpanel');
					var editPanel = Ext.getCmp('modeleditpanel');
					if(builderPanel.items.items.length > 0) {
						builderPanel.removeAll();
						Ext.getCmp('elementdetailgrid').getStore().removeAll();
						Ext.getCmp('detailpropertiesgrid').getStore().removeAll();
						Ext.getCmp('baseConfigForm').removeAll(true);
						builderPanel.currenSelectPanel = null;
						me.repaint(record);
					}else {
						me.repaint(record);
					}
					view.setButtonDisabled(false);					
				},
    			beforeaddpanel:function(panel, config){
    			},
    			afteraddpanel: function(panel, component) {
					me.setCmpPosition(panel,component);
    			},
    			add:function(self,component){
    				self.fireEvent('changepanel',self,component);
    			},
    			changepanel:function(self,newPanel){
					var currentPanel = self.currenSelectPanel;
    				if(currentPanel!=null&&currentPanel.id!=newPanel.id){
    					currentPanel.removeCls('select-panel');
    					newPanel.addCls('select-panel');
    					currentPanel.fireEvent('unselectpanel',currentPanel,self);
    					newPanel.fireEvent('selectpanel',newPanel,self);
    				}else if(currentPanel==null){
    					newPanel.addCls('select-panel');
    					newPanel.fireEvent('selectpanel',newPanel,self);
    				}
    				self.currenSelectPanel = newPanel;
    				self.change = true;
    			}
    		},
    		'elementconfigpanel button[id=detailDelete]':{
    			click:function(btn){
    				var builderPanel = Ext.getCmp('modelbuilderpanel');
    				var currenSelectPanel = builderPanel.currenSelectPanel;
    				var detailGrid = Ext.getCmp('elementdetailgrid');
    				if(currenSelectPanel==null){
    					Ext.Msg.alert('提示','请先添加Panel!');
    				}else{
	    				var detailGrid = Ext.getCmp('elementdetailgrid');
	    				var detailSelect = detailGrid.getSelectionModel().getSelection()[0];   
	    				if(!detailSelect){
	    					Ext.Msg.alert('提示','请先选择字段!');
	    				}else{
	    					currenSelectPanel.fireEvent('fielddelete',currenSelectPanel,detailSelect);
	    					detailGrid.getStore().remove(detailSelect);
							Ext.getCmp('detailpropertiesgrid').getStore().removeAll();	    				
	    				}
    				}
    			}
    		},
    		'elementconfigpanel button[id=detailAdd]':{
    			click:function(btn){
    				var builderPanel = Ext.getCmp('modelbuilderpanel');
    				var currenSelectPanel = builderPanel.currenSelectPanel;
    				var detailGrid = Ext.getCmp('elementdetailgrid');
    				if(currenSelectPanel==null){
    					Ext.Msg.alert('提示','请先添加Panel!');
    				}else{
    					currenSelectPanel.fireEvent('addItem',currenSelectPanel,detailGrid);
    				}
    			}
    		},
    		'elementdetailgrid':{
    			edit:function(editor, e, eOpts){
					var rowIdx = e.rowIdx;
    				var builderPanel = Ext.getCmp('modelbuilderpanel');
    				var currenSelectPanel = builderPanel.currenSelectPanel;
    				currenSelectPanel.fireEvent('fieldnamechange',currenSelectPanel,e.record,rowIdx);
    			},
    			select:function(grid,record,index,eOpts){
    				var propertiesGrid = Ext.getCmp('detailpropertiesgrid');
    				propertiesGrid.getStore().loadData(record.get('propconfig'));
    				// 加载数据之后立即保存数据
    				var detailSelect = grid.getSelection()[0];
					detailSelect.set('propconfig',me.getPropConfigByRecord(propertiesGrid.store.data.items));
    			}
    		},
    		'detailpropertiesgrid combo[id=propCombo]':{
    			select:function(combo,records){
    				var detailGrid = Ext.getCmp('elementdetailgrid');
    				var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
    				if(detailSelect==null){
    					Ext.Msg.alert('提示','请先选择字段!')
    				}
    				if(detailSelect!=null){
	    				var propGrid = Ext.getCmp('detailpropertiesgrid');
	    				propGrid.getStore().loadData([{
	    					property:records[0].get('name'),
	    					//propvalue:records[0].get('value')
	    				}],true);    					
    				}
    			}
    		},
    		'detailpropertiesgrid':{
    			edit:function(editor, e, eOpts){
					var rowIdx = e.rowIdx;
    				var detailGrid = Ext.getCmp('elementdetailgrid');
    				var detailSelect = detailGrid.getSelectionModel().getSelection()[0];
					detailSelect.set('propconfig',me.getPropConfigByRecord(e.store.data.items));
					var builderPanel = Ext.getCmp('modelbuilderpanel');
    				var currenSelectPanel = builderPanel.currenSelectPanel;
    				currenSelectPanel.fireEvent('fieldpropchange',currenSelectPanel,detailSelect,rowIdx);
				},
				celldblclick: function (gridview, colEl, colIndex, record, rowEl, rowIndex, e, eOpts) {
					var grid = gridview.up('grid');
					var column = grid.columnManager.columns[1];
					var builderPanel = Ext.getCmp('modelbuilderpanel');
					var currenSelectPanel = builderPanel.currenSelectPanel; 
					var propconfig = currenSelectPanel.config.propGridDefault.propconfig;
					
					var editor;
					for(var i = 0; i < propconfig.length; i++) {
						if(propconfig[i].property == record.get('property')) {
							console.log(propconfig[i].editor);
							editor = propconfig[i].editor || {xtype: 'textfield'};
						}
					}
					column.setEditor(editor);
					gridview.up('grid').getPlugin().startEditByPosition({row: rowIndex, column: 1});
                }
    		}
    	});
  	 },
  	 setCmpPosition:function(panel,component){
		Ext.defer(function(){
			var xy = component.getXY();
			var builderPanelXY = panel.body.getXY();
			var builderPanelWidth = panel.body.getWidth();
			var builderPanelHeight = panel.body.getHeight();
			var xRatio =  Math.round((xy[0]-builderPanelXY[0])/builderPanelWidth*100);
			var yRatio = Math.round((xy[1]-(builderPanelXY[1]+1))/builderPanelHeight*100);
			var widthRatio = Math.round(component.getWidth()/builderPanelWidth*100);
			var heightRatio = Math.round(component.getHeight()/builderPanelHeight*100);
			
			var form = Ext.getCmp('baseConfigForm');
			var values = form.getForm().getValues();
			Ext.apply(values,{
				x:xRatio,
				y:yRatio,
				width:widthRatio,
				height:heightRatio
			});
			form.getForm().setValues(values);
			component.baseConfigFormValue = values;
		},300);
  	 },
  	 repaint: function(record) {
  	 	var me = this;
  	 	var builderPanel = Ext.getCmp('modelbuilderpanel');
  	 	var builderPanelXY = builderPanel.getXY();
  	 	var builderPanelBodyWidth = builderPanel.body.getWidth();
  	 	var builderPanelBodyHeight = builderPanel.body.getHeight();
  	 	// 请求xml数据
  	 	//var xmlstr = me.getXmlString(record.get('code'));
  	 	var xmlstr = record.get('content');
  	 	if(!xmlstr){
  	 		return;
  	 	}
		// 根据xml字符串创建XML DOM
		var xmlDom = me.loadXML(xmlstr);
		// 根据xml数据生成jsonObject
		var modelObj = me.XML2JSON(xmlDom);
		// 添加组件
		var sl = st = 0;
		for(var i = 0; i < modelObj.length; i++) {
			var x = builderPanelBodyWidth*modelObj[i].x/100+builderPanelXY[0];
			var y = builderPanelBodyHeight*modelObj[i].y/100+builderPanelXY[1];
			var width = builderPanelBodyWidth*(modelObj[i].width/100);
			var height = builderPanelBodyHeight*(modelObj[i].height/100);
			var companel = builderPanel.add({
            	xtype: modelObj[i].type + 'component',
            	width: width,
            	height: height,
            	detailData: modelObj[i].detailData,
				baseConfigFormValue: modelObj[i].baseConfigFormValue
			});
	        companel.repaint();
	        companel.setXY([x,y]);
	        //companel.setLayoutPosition({x: modelObj[i].x, y: modelObj[i].y, width: modelObj[i].width, height: modelObj[i].height})
		}
  	 },
  	 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;
  	 },
  	 loadXML: function(xmlString){
        var xmlDoc=null;
        //判断浏览器的类型
        //支持IE浏览器 
        if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器
            var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
            for(var i=0;i<xmlDomVersions.length;i++){
                try{
                    xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                    xmlDoc.async = false;
                    xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
                    break;
                }catch(e){
                }
            }
        }
        //支持Mozilla浏览器
        else if(window.DOMParser && document.implementation && document.implementation.createDocument){
            try{
                /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
                 * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
                 * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
                 * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
                 */
                domParser = new  DOMParser();
                xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
            }catch(e){
            }
        }
        else{
            return null;
        }

        return xmlDoc;
    },
    XML2JSON: function(xmlDom) {
    	var jsonObj = [];
    	var doc = xmlDom;
    	//var doc = xmlDom.getRootNode();
    	var root = doc.children[0]
    	var children = root.children;
    	for(var i = 0; i < children.length; i++) {
    		var ch = children[i];
    		var nodeName = ch.nodeName;
    		var x = ch.getAttribute('x');
    		var y = ch.getAttribute('y');
    		var width = ch.getAttribute('width');
    		var height = ch.getAttribute('height');
    		var fields = ch.getElementsByTagName('field');
    		var detailData = [];
    		
    		for(var j = 0; j < fields.length; j++) {
    			var v = fields[j];
    			
    			var propfields = [];
	    		if(nodeName == 'form') {
	    			propfields.push(
						{display: "变量名", property: "value", propvalue: v.getAttribute('value')},
	    				{display: "宽度(%)", property: "width", propvalue: v.getAttribute('width')},
	    				{display: "field宽度(%)", property: "fieldwidth", propvalue: v.getAttribute('fieldwidth')},
	    				{display: "value宽度(%)", property: "valuewidth", propvalue: v.getAttribute('valuewidth')},
	    				{display: "换行", property: "fill", propvalue: v.getAttribute('fill')},
						{display: "field-style", property: "fieldstyle", propvalue: v.getAttribute('fieldstyle')},
						{display: "value-style", property: "valuestyle", propvalue: v.getAttribute('valuestyle')},
						{display: "显示", property: "rendername", propvalue: v.getAttribute('rendername')});
	    		}else if(nodeName == 'grid') {
	    			propfields.push({display: "宽度", property: "width", propvalue: v.getAttribute('width')},
	            		{display: "排序", property: "sort", propvalue: v.getAttribute('sort')},
						{display: "列头样式", property: "headerrowstyle", propvalue: v.getAttribute('headerrowstyle')},
						{display: "列样式", property: "rowstyle", propvalue: v.getAttribute('rowstyle')},
						{display: "显示", property: "rendername", propvalue: v.getAttribute('rendername')},
						{display: "数据绑定", property: "dataindex", propvalue: v.getAttribute('dataindex')},
						{display: "值（仅作展示）", property: "data", propvalue: v.getAttribute('data')}/*,
						{display: "变量名", property: "value", propvalue: v.getAttribute('value')}*/);
	    		}else {
	    			
	    		}
    			var propconfig = propfields;
    			detailData.push({
    				fieldid: "",
    				fieldname: v.getAttribute('name'),
    				fieldvalue: "",
    				propconfig: propconfig
    			})
    		}
    		
    		var baseConfigFormValue = {
				titletext: ch.getAttribute('titletext'),
				titlestyle: ch.getAttribute('titlestyle'),
				/*allcls: ch.getAttribute('allcls'),*/
				headerrowsstyle: ch.getAttribute('headerrowsstyle'),
				rowsstyle: ch.getAttribute('rowsstyle'),
				allrender: ch.getAttribute('allrender'),
				interval: ch.getAttribute('interval'),
				pagesize: ch.getAttribute('pagesize'),
				sql: ch.getAttribute('sql'),
				fieldstyle: ch.getAttribute('fieldstyle'),
				valuestyle: ch.getAttribute('valuestyle'),
				fields: ch.getAttribute('fields'),
				maintitle: ch.getAttribute('maintitle'),
				subtitle: ch.getAttribute('subtitle'),
				xfields: ch.getAttribute('xfields'),
				xtitle: ch.getAttribute('xtitle'),
				xtype: ch.getAttribute('xtype'),
				xvalue: ch.getAttribute('xvalue'),
				ytitle: ch.getAttribute('ytitle'),
				ytype: ch.getAttribute('ytype'),
				field: ch.getAttribute('field'),
				value: ch.getAttribute('value'),
				x:x,
				y:y,
				width:width,
				height:height
			};
			for(var key in baseConfigFormValue) {
				if(baseConfigFormValue[key] == null) {
					delete baseConfigFormValue[key]
				}
			}
    		jsonObj.push({
    			type: nodeName,
    			x: x,
    			y: y,
    			width: width,
    			height: height,
    			detailData: detailData,
    			baseConfigFormValue: baseConfigFormValue
    		});
    	}
		return jsonObj;
    }
});