MWF.xApplication.Template = MWF.xApplication.Template || {}; //MWF.xDesktop.requireApp("Template", "lp." + MWF.language, null, false); MWF.xApplication.Template.MPopupForm = MPopupForm = new Class({ Extends: MWF.widget.Common, Implements: [Options, Events], options: { "style": "default", "width": 500, "height": 450, "top": null, "left": null, "bottom" : null, "right" : null, "minWidth" : 300, "minHeight" : 220, "isLimitSize": true, "ifFade": true, "hasTop": false, "hasTopIcon" : false, "hasTopContent" : false, "hasIcon": true, "hasMask" : true, "closeByClickMask" : false, "hasScroll" : true, "scrollType" : "", "title": "", "draggable": false, "resizeable" : false, "maxAction" : false, "closeAction": true, "okClass": "", "topClass": "", "relativeToApp" : true, "sizeRelateTo" : "app", //desktop "resultSeparator" : ",", "hasBottom": true, "hideBottomWhenReading": false, "closeByClickMaskWhenReading" : false, "buttonList" : [{ "type":"cancel", "text": "" },{ "type":"ok", "text": "" }] }, initialize: function (explorer, data, options, para) { this.setOptions(options); this.explorer = explorer; if( para ){ if( this.options.relativeToApp ){ this.app = para.app || this.explorer.app; this.container = para.container || this.app.content; this.lp = para.lp || this.explorer.lp || this.app.lp; this.css = para.css || this.explorer.css || this.app.css; this.actions = para.actions || this.explorer.actions || this.app.actions || this.app.restActions; }else{ this.container = para.container; this.lp = para.lp || this.explorer.lp; this.css = para.css || this.explorer.css; this.actions = para.actions || this.explorer.actions; } }else{ if( this.options.relativeToApp ){ this.app = this.explorer.app; this.container = this.app.content; this.lp = this.explorer.lp || this.app.lp; this.css = this.explorer.css || this.app.css; this.actions = this.explorer.actions || this.app.actions || this.app.restActions; }else{ this.container = window.document.body; this.lp = this.explorer.lp; this.css = this.explorer.css; this.actions = this.explorer.actions; } } this.data = data || {}; this.cssPath = "../x_component_Template/$MPopupForm/"+this.options.style+"/css.wcss"; this.load(); }, load: function () { this._loadCss(); }, _loadCss: function(reload){ var css = {}; var key = encodeURIComponent(this.cssPath); if (!reload && o2.widget.css[key]){ css = Object.clone(o2.widget.css[key]); }else{ var r = new Request.JSON({ url: o2.filterUrl(this.cssPath), secure: false, async: false, method: "get", noCache: false, onSuccess: function(responseJSON, responseText){ o2.widget.css[key] = responseJSON; css = Object.clone(responseJSON); }.bind(this), onError: function(text, error){ alert(error + text); } }); r.send(); } var isEmptyObject = true; for( var key in css ){ if(key){ isEmptyObject = false; break; } } if( !isEmptyObject ){ this.css = Object.merge( css, this.css || {}); }else if( !this.css ){ this.css = {}; } }, reload : function( keepData ){ if( keepData ){ this.data = this.form.getResult(false, this.options.resultSeparator, false, false, true); } this.formTopNode = null; if(this.setFormNodeSizeFun && this.app && this.app.removeEvent){ this.app.removeEvent("resize",this.setFormNodeSizeFun); } if( this.formMaskNode )this.formMaskNode.destroy(); if( this.formAreaNode )this.formAreaNode.destroy(); if( this.isNew ){ this.create(); }else if( this.isEdited ){ this.edit(); }else{ this.open(); } }, open: function (e) { this.fireEvent("queryOpen"); this.isNew = false; this.isEdited = false; this._open(); this.fireEvent("postOpen"); }, create: function () { this.fireEvent("queryCreate"); this.isNew = true; this._open(); this.fireEvent("postCreate"); }, edit: function () { this.fireEvent("queryEdit"); this.isEdited = true; this._open(); this.fireEvent("postEdit"); }, _open: function () { this.fireEvent("queryLoad"); if(this._queryLoad)this._queryLoad(); if( this.options.hasMask ){ this.formMaskNode = new Element("div.formMaskNode", { "styles": this.css.formMaskNode, "events": { "mouseover": function (e) { e.stopPropagation(); }, "mouseout": function (e) { e.stopPropagation(); }, "click": function (e) { e.stopPropagation(); }, "mousewheel": function (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; }, "DOMMouseScroll": function (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } } }).inject( this.container || this.app.content); } this.formAreaNode = new Element("div.formAreaNode", { "styles": this.css.formAreaNode }); this.createFormNode(); if( this.formMaskNode ){ this.formAreaNode.inject(this.formMaskNode , "after"); }else{ this.formAreaNode.inject( this.container || this.app.content ); } if (this.options.ifFade){ this.formAreaNode.fade("in"); }else{ this.formAreaNode.setStyle("opacity", 1); } this.setFormNodeSize(); this.setFormNodeSizeFun = this.setFormNodeSize.bind(this); if( this.app && this.app.addEvent )this.app.addEvent("resize", this.setFormNodeSizeFun); if (this.options.draggable && this.formTopNode) { var size = (this.container || this.app.content).getSize(); var nodeSize = this.formAreaNode.getSize(); this.formAreaNode.makeDraggable({ "handle": this.formTopNode, "limit": { "x": [0, size.x - nodeSize.x], "y": [0, size.y - nodeSize.y] }, "onDrag": function(){ this.fireEvent("drag"); }.bind(this), "onComplete": function(){ this.fireEvent("dragCompleted"); }.bind(this) }); } if( ( this.options.closeByClickMask || (!this.isNew && !this.isEdited && this.options.closeByClickMaskWhenReading) ) && this.formMaskNode ){ this.formMaskNode.addEvent("click", function(e){ this.close(e) }.bind(this)); } if (this.options.resizeable){ this.resizeNode = new Element("div.resizeNode", { "styles": this.css.resizeNode }).inject(this.formNode); this.formAreaNode.makeResizable({ "handle": this.resizeNode, "limit": {x:[ this.options.minWidth, null], y:[this.options.minHeight, null]}, "onDrag": function(){ var size = this.formAreaNode.getComputedSize(); this.setNodesSize( size.width, size.height ); this.fireEvent("resize"); }.bind(this), "onComplete": function(){ var size = this.formAreaNode.getComputedSize(); this.options.width = size.width; this.options.height = size.height; if( this.oldCoordinate ){ this.oldCoordinate.width = size.width; this.oldCoordinate.height = size.height; } this.fireEvent("resizeCompleted"); this.fireEvent("afterResize"); }.bind(this) }); } if(this._postLoad)this._postLoad(); this.fireEvent("postLoad"); }, createFormNode: function () { var _self = this; this.formNode = new Element("div.formNode", { "styles": this.css.formNode }).inject(this.formAreaNode); if (this.options.hasTop) { this.createTopNode(); } if (this.options.hasIcon) { this.formIconNode = new Element("div.formIconNode", { "styles": this.isNew ? this.css.formNewNode : this.css.formIconNode }).inject(this.formNode); } this.createContent(); //formContentNode.set("html", html); if (this.options.hasBottom && (this.isNew || this.isEdited || !this.options.hideBottomWhenReading) ) { this.createBottomNode(); } this._setCustom(); if( this.options.hasScroll ){ //this.setScrollBar(this.formTableContainer) if( this.options.scrollType == "window" ){ this.formContentNode.setStyle("overflow","auto"); this.formTableContainer.setStyle("overflow","visible"); }else{ MWF.require("MWF.widget.ScrollBar", function () { new MWF.widget.ScrollBar(this.formTableContainer, { "indent": false, "style": "xApp_TaskList", "where": "before", "distance": 30, "friction": 4, "axis": {"x": false, "y": true}, "onScroll": function (y) { //var scrollSize = _self.viewContainerNode.getScrollSize(); //var clientSize = _self.viewContainerNode.getSize(); //var scrollHeight = scrollSize.y - clientSize.y; //if (y + 200 > scrollHeight && _self.view && _self.view.loadElementList) { // if (!_self.view.isItemsLoaded) _self.view.loadElementList(); //} } }); }.bind(this)); } } }, _setCustom : function(){ }, createTopNode: function () { this.fireEvent("queryCreateTop"); if (!this.formTopNode) { this.formTopNode = new Element("div.formTopNode", { "styles": this.css.formTopNode }).inject(this.formNode); if( this.options.topClass ){ this.formTopNode.addClass( this.options.topClass ); } if(this.options.hasTopIcon){ this.formTopIconNode = new Element("div", { "styles": this.css.formTopIconNode }).inject(this.formTopNode) } this.formTopTextNode = new Element("div", { "styles": this.css.formTopTextNode, "text": this.options.title }).inject(this.formTopNode); if (this.options.closeAction) { this.formTopCloseActionNode = new Element("div", { "styles": this.css.formTopCloseActionNode, "title" : MWF.xApplication.Template.LP.MPopupForm.close }).inject(this.formTopNode); this.formTopCloseActionNode.addEvent("click", function ( ev ) { this.close(); ev.stopPropagation(); }.bind(this)) } if( this.options.maxAction ){ this.formTopMaxActionNode = new Element("div", { "styles": this.css.formTopMaxActionNode, "title" : MWF.xApplication.Template.LP.MPopupForm.max }).inject(this.formTopNode); this.formTopMaxActionNode.addEvent("click", function () { this.maxSize() }.bind(this)); this.formTopRestoreActionNode = new Element("div", { "styles": this.css.formTopRestoreActionNode, "title": MWF.xApplication.Template.LP.MPopupForm.restore }).inject(this.formTopNode); this.formTopRestoreActionNode.addEvent("click", function () { this.restoreSize() }.bind(this)); this.formTopNode.addEvent("dblclick", function(){ this.switchMax(); }.bind(this)); } if(this.options.hasTopContent){ this.formTopContentNode = new Element("div.formTopContentNode", { "styles": this.css.formTopContentNode }).inject(this.formTopNode); this._createTopContent(); } } this.fireEvent("postCreateTop"); //if (!this.formTopNode) { // this.formTopNode = new Element("div.formTopNode", { // "styles": this.css.formTopNode, // "text": this.options.title // }).inject(this.formNode); // // this._createTopContent(); // // if (this.options.closeAction) { // this.formTopCloseActionNode = new Element("div.formTopCloseActionNode", {"styles": this.css.formTopCloseActionNode}).inject(this.formTopNode); // this.formTopCloseActionNode.addEvent("click", function () { // this.close() // }.bind(this)) // } //} }, _createTopContent: function () { }, createContent: function () { this.formContentNode = new Element("div.formContentNode", { "styles": this.css.formContentNode }).inject(this.formNode); this.formTableContainer = new Element("div.formTableContainer", { "styles": this.css.formTableContainer }).inject(this.formContentNode); this.formTableArea = new Element("div.formTableArea", { "styles": this.css.formTableArea }).inject(this.formTableContainer); this._createTableContent(); }, _createTableContent: function () { var html = "" + //"" + "" + " " + "" + " " + "" + " " + "" + " " + "" + " " + "" + " " + "" + " " + "
申诉处理单
"; this.formTableArea.set("html", html); MWF.xDesktop.requireApp("Template", "MForm", function () { this.form = new MForm(this.formTableArea, {empName: "xadmin"}, { isEdited: this.isEdited || this.isNew, itemTemplate: { empName: {text: "姓名", type: "innertext"}, departmentName: {text: "部门", tType: "department", notEmpty: true}, recordDateString: {text: "日期", tType: "date"}, status: {text: "状态", tType: "number"}, appealReason: { text: "下拉框", type: "select", selectValue: ["测试1", "测试2"] }, appealDescription: {text: "描述", type: "textarea"}, opinion1: {text: "测试", type: "button", "value": "测试"} } }, this.app); this.form.load(); }.bind(this), true); }, createBottomNode: function () { this.fireEvent("queryCreateBottom"); this.formBottomNode = new Element("div.formBottomNode", { "styles": this.css.formBottomNode }).inject(this.formNode); this._createBottomContent(); this.fireEvent("postCreateBottom"); }, _createBottomContent: function () { if( !this.options.buttonList ){ this._createCancelActionNode(); this._createOkActionNode(); }else{ debugger; this.options.buttonList.each(function (button) { if(button.type === "cancel"){ this._createCancelActionNode( button.text || "" ); }else if( button.type === "ok" ){ this._createOkActionNode( button.text || "" ); }else{ } }.bind(this)) } }, _createCancelActionNode: function(text){ this.cancelActionNode = new Element("div.formCancelActionNode", { "styles": this.css.formCancelActionNode, "text": text || this.lp.cancel }).inject(this.formBottomNode); this.cancelActionNode.addEvent("click", function (e) { this.cancel(e); }.bind(this)); }, _createOkActionNode: function(text){ if (this.isNew || this.isEdited) { this.okActionNode = new Element("div.formOkActionNode", { "styles": this.css.formOkActionNode, "text": text || this.lp.ok }).inject(this.formBottomNode); if( this.options.okClass ){ this.okActionNode.addClass( this.options.okClass ); } this.okActionNode.addEvent("click", function (e) { this.ok(e); }.bind(this)); } }, cancel: function (e) { this.fireEvent("queryCancel"); this.close(); this.fireEvent("postCancel"); }, close: function (e) { this.fireEvent("queryClose"); this._close(); //if( this.form ){ // this.form.destroy(); //} if(this.setFormNodeSizeFun && this.app && this.app.removeEvent ){ this.app.removeEvent("resize",this.setFormNodeSizeFun); } if( this.formMaskNode )this.formMaskNode.destroy(); if( this.formAreaNode )this.formAreaNode.destroy(); this.fireEvent("postClose"); delete this; }, _close: function(){ }, ok: function (e) { this.fireEvent("queryOk"); var data = this.form.getResult(true, this.options.resultSeparator, true, false, true); if (data) { this._ok(data, function (json) { if (json.type == "error") { if( this.app && this.app.notice )this.app.notice(json.message, "error"); } else { if( this.formMaskNode )this.formMaskNode.destroy(); if( this.formAreaNode )this.formAreaNode.destroy(); if (this.explorer && this.explorer.view)this.explorer.view.reload(); if( this.app && this.app.notice)this.app.notice(this.isNew ? this.lp.createSuccess : this.lp.updateSuccess, "success"); this.fireEvent("postOk"); } }.bind(this)) } }, _ok: function (data, callback) { //this.app.restActions.saveDocument( this.data.id, data, function(json){ // if( callback )callback(json); //}.bind(this), function( errorObj ){ // var error = JSON.parse( errorObj.responseText ); // this.app.notice( error.message, error ); //}.bind(this)); }, switchMax : function(){ if( !this.isMax ){ this.maxSize(); }else{ this.restoreSize(); } }, maxSize: function(){ if(!this.oldCoordinate)this.oldCoordinate = { width : this.options.width, height : this.options.height, top : this.options.top, left : this.options.left, bottom : this.options.bottom, right : this.options.right }; this.options.width = "100%"; this.options.height = "100%"; this.options.top = null; this.options.left = null; this.options.bottom = null; this.options.right = null; this.setFormNodeSize(); this.formTopMaxActionNode.setStyle("display","none"); this.formTopRestoreActionNode.setStyle("display",""); this.isMax = true; this.fireEvent("max"); this.fireEvent("afterResize"); }, restoreSize : function(){ if( this.oldCoordinate){ this.options.width = this.oldCoordinate.width; this.options.height = this.oldCoordinate.height; this.options.top = this.oldCoordinate.top; this.options.left = this.oldCoordinate.left; this.options.bottom = this.oldCoordinate.bottom; this.options.right = this.oldCoordinate.right; } this.setFormNodeSize(); this.formTopMaxActionNode.setStyle("display",""); this.formTopRestoreActionNode.setStyle("display","none"); this.isMax = false; this.fireEvent("restore"); this.fireEvent("afterResize"); }, resetHeight: function( height, offset ){ var h; if( height === "auto" ){ var tableHeight = this.formTableArea.getSize().y; var tableContainerOffsetY = this.getOffsetY( this.formTableContainer ); var formContentOffsetY = this.getOffsetY( this.formContentNode ); var formTopHeight = this.formTopNode ? ( this.formTopNode.getSize().y + this.getOffsetY(this.formTopNode) ) : 0; var formBottomHeight = this.formBottomNode ? ( this.formBottomNode.getSize().y + this.getOffsetY(this.formBottomNode) ) : 0; h = tableHeight + tableContainerOffsetY + formContentOffsetY + formTopHeight + formBottomHeight + (offset || 0); }else{ h = height + (offset || 0); } this.options.height = h; if( this.isMax )return; var s = this.lastStyle || {}; this.setFormNodeSize(null, h, s.top, s.left ); this.fireEvent("afterResize"); }, setSize: function(width, height){ if( width )this.options.width = width; if( height )this.options.height = height; this.setFormNodeSize(width, height); this.fireEvent("afterResize"); }, setFormNodeSize: function (width, height, top, left, bottom, right) { this._beforeFormNodeSize(); if (!width)width = this.options.width ? this.options.width : "50%"; if (!height)height = this.options.height ? this.options.height : "50%"; if (!top && top != 0 ) top = this.options.top; // ? this.options.top : 0; if (!left && left != 0) left = this.options.left; // ? this.options.left : 0; if (!bottom && bottom != 0) bottom = this.options.bottom; // ? this.options.bottom : 0; if (!right && right != 0) right = this.options.right; // ? this.options.right : 0; width = width.toString(); height = height.toString(); var allSize = ( this.container || this.app.content).getSize(); var limitWidth = allSize.x; //window.screen.width var limitHeight = allSize.y; //window.screen.height if (this.options.isLimitSize){ if( "%" != width.substr(width.length - 1, 1) ){ if( allSize.x < parseInt(width) )width = allSize.x; } if( "%" != height.substr(height.length - 1, 1) ){ if( allSize.y < parseInt(height) )height = allSize.y; } } //if( width != "auto" ){ "string" == typeof width && (1 < width.length && "%" == width.substr(width.length - 1, 1)) && (width = parseInt(limitWidth * parseInt(width, 10) / 100, 10)); this.options.minWidth > width && (width = this.options.minWidth); //} //if( height != "auto" ){ "string" == typeof height && (1 < height.length && "%" == height.substr(height.length - 1, 1)) && (height = parseInt(limitHeight * parseInt(height, 10) / 100, 10)); this.options.minHeight > height && (height = this.options.minHeight); //} var styles = { "width": "" + width + "px", "height": "" + height + "px" }; if( top != null ){ styles.top = "" + top + "px"; styles.bottom = "auto"; }else if( bottom != null ){ styles.top = "auto"; styles.bottom = "" + bottom + "px"; }else{ styles.top = "" + parseInt((limitHeight - height) / 2, 10) + "px"; styles.bottom = "auto"; } if( left != null ){ styles.left = "" + left + "px"; styles.right = "auto"; }else if( right != null ){ styles.left = "auto"; styles.right = "" + right + "px"; }else{ styles.left = "" + parseInt((limitWidth - width) / 2, 10) + "px"; styles.right = "auto"; } this.lastStyle = styles; if( this.formAreaNode )this.formAreaNode.setStyles(styles); this._setFormNodeSize(styles); this.setNodesSize( width, height ); }, _beforeFormNodeSize : function(){ }, _setFormNodeSize: function( styles ){ }, setNodesSize: function(width, height){ //if( height == "auto" )return; this.options.minWidth > width && (width = this.options.minWidth); this.options.minHeight > height && (height = this.options.minHeight); this.formNode.setStyles({ "width": "" + width + "px", "height": "" + height + "px" }); var iconSize = this.formIconNode ? this.formIconNode.getSize() : {x: 0, y: 0}; var topSize = this.formTopNode ? this.formTopNode.getSize() : {x: 0, y: 0}; var bottomSize = this.formBottomNode ? this.formBottomNode.getSize() : {x: 0, y: 0}; var contentHeight = height - iconSize.y - topSize.y - bottomSize.y; var marginTop = parseFloat(this.formContentNode.getStyle( "margin-top" )) || 0; var marginBottom = parseFloat(this.formContentNode.getStyle( "margin-bottom" )) || 0; var formContentHeight = contentHeight - marginTop - marginBottom; this.formContentNode.setStyles({ "height": "" + formContentHeight + "px" }); var paddingTop = parseFloat( this.formContentNode.getStyle( "padding-top" )) || 0; var paddingBottom = parseFloat( this.formContentNode.getStyle( "padding-bottom" )) || 0; marginTop = parseFloat( this.formTableContainer.getStyle( "margin-top" )) || 0; marginBottom = parseFloat( this.formTableContainer.getStyle( "margin-bottom" )) || 0; var tablePaddingTop = parseFloat( this.formTableContainer.getStyle( "padding-top" )) || 0; var tablePaddingTBottom = parseFloat( this.formTableContainer.getStyle( "padding-bottom" )) || 0; var formTableHeight = contentHeight - marginTop - marginBottom - paddingTop - paddingBottom - tablePaddingTop - tablePaddingTBottom; if( this.options.scrollType == "window" ){ formTableHeight = formTableHeight - 10; } this.formTableContainer.setStyles({ "height": "" + formTableHeight + "px" }); this._setNodesSize( width, height, formContentHeight, formTableHeight ); this.fireEvent("resizeForm"); }, _setNodesSize : function(width, height, formContentHeight, formTableHeight ){ }, getOffsetY : function(node){ return (node.getStyle("margin-top").toInt() || 0 ) + (node.getStyle("margin-bottom").toInt() || 0 ) + (node.getStyle("padding-top").toInt() || 0 ) + (node.getStyle("padding-bottom").toInt() || 0 )+ (node.getStyle("border-top-width").toInt() || 0 ) + (node.getStyle("border-bottom-width").toInt() || 0 ); }, getOffsetX : function(node){ return (node.getStyle("margin-left").toInt() || 0 ) + (node.getStyle("margin-right").toInt() || 0 ) + (node.getStyle("padding-left").toInt() || 0 ) + (node.getStyle("padding-right").toInt() || 0 )+ (node.getStyle("border-left-width").toInt() || 0 ) + (node.getStyle("border-right-width").toInt() || 0 ); } });