MPopupForm.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. MWF.xApplication.Template = MWF.xApplication.Template || {};
  2. //MWF.xDesktop.requireApp("Template", "lp." + MWF.language, null, false);
  3. MWF.xApplication.Template.MPopupForm = MPopupForm = new Class({
  4. Extends: MWF.widget.Common,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "width": 500,
  9. "height": 450,
  10. "top": null,
  11. "left": null,
  12. "bottom" : null,
  13. "right" : null,
  14. "minWidth" : 300,
  15. "minHeight" : 220,
  16. "isLimitSize": true,
  17. "ifFade": true,
  18. "hasTop": false,
  19. "hasTopIcon" : false,
  20. "hasTopContent" : false,
  21. "hasIcon": true,
  22. "hasMask" : true,
  23. "closeByClickMask" : false,
  24. "hasScroll" : true,
  25. "scrollType" : "",
  26. "title": "",
  27. "draggable": false,
  28. "resizeable" : false,
  29. "maxAction" : false,
  30. "closeAction": true,
  31. "okClass": "",
  32. "topClass": "",
  33. "relativeToApp" : true,
  34. "sizeRelateTo" : "app", //desktop
  35. "resultSeparator" : ",",
  36. "hasBottom": true,
  37. "hideBottomWhenReading": false,
  38. "closeByClickMaskWhenReading" : false,
  39. "buttonList" : [{ "type":"cancel", "text": "" },{ "type":"ok", "text": "" }]
  40. },
  41. initialize: function (explorer, data, options, para) {
  42. this.setOptions(options);
  43. this.explorer = explorer;
  44. if( para ){
  45. if( this.options.relativeToApp ){
  46. this.app = para.app || this.explorer.app;
  47. this.container = para.container || this.app.content;
  48. this.lp = para.lp || this.explorer.lp || this.app.lp;
  49. this.css = para.css || this.explorer.css || this.app.css;
  50. this.actions = para.actions || this.explorer.actions || this.app.actions || this.app.restActions;
  51. }else{
  52. this.container = para.container;
  53. this.lp = para.lp || this.explorer.lp;
  54. this.css = para.css || this.explorer.css;
  55. this.actions = para.actions || this.explorer.actions;
  56. }
  57. }else{
  58. if( this.options.relativeToApp ){
  59. this.app = this.explorer.app;
  60. this.container = this.app.content;
  61. this.lp = this.explorer.lp || this.app.lp;
  62. this.css = this.explorer.css || this.app.css;
  63. this.actions = this.explorer.actions || this.app.actions || this.app.restActions;
  64. }else{
  65. this.container = window.document.body;
  66. this.lp = this.explorer.lp;
  67. this.css = this.explorer.css;
  68. this.actions = this.explorer.actions;
  69. }
  70. }
  71. this.data = data || {};
  72. this.cssPath = "../x_component_Template/$MPopupForm/"+this.options.style+"/css.wcss";
  73. this.load();
  74. },
  75. load: function () {
  76. this._loadCss();
  77. },
  78. _loadCss: function(reload){
  79. var css = {};
  80. var key = encodeURIComponent(this.cssPath);
  81. if (!reload && o2.widget.css[key]){
  82. css = Object.clone(o2.widget.css[key]);
  83. }else{
  84. var r = new Request.JSON({
  85. url: o2.filterUrl(this.cssPath),
  86. secure: false,
  87. async: false,
  88. method: "get",
  89. noCache: false,
  90. onSuccess: function(responseJSON, responseText){
  91. o2.widget.css[key] = responseJSON;
  92. css = Object.clone(responseJSON);
  93. }.bind(this),
  94. onError: function(text, error){
  95. alert(error + text);
  96. }
  97. });
  98. r.send();
  99. }
  100. var isEmptyObject = true;
  101. for( var key in css ){
  102. if(key){
  103. isEmptyObject = false;
  104. break;
  105. }
  106. }
  107. if( !isEmptyObject ){
  108. this.css = Object.merge( css, this.css || {});
  109. }else if( !this.css ){
  110. this.css = {};
  111. }
  112. },
  113. reload : function( keepData ){
  114. if( keepData ){
  115. this.data = this.form.getResult(false, this.options.resultSeparator, false, false, true);
  116. }
  117. this.formTopNode = null;
  118. if(this.setFormNodeSizeFun && this.app && this.app.removeEvent){
  119. this.app.removeEvent("resize",this.setFormNodeSizeFun);
  120. }
  121. if( this.formMaskNode )this.formMaskNode.destroy();
  122. if( this.formAreaNode )this.formAreaNode.destroy();
  123. if( this.isNew ){
  124. this.create();
  125. }else if( this.isEdited ){
  126. this.edit();
  127. }else{
  128. this.open();
  129. }
  130. },
  131. open: function (e) {
  132. this.fireEvent("queryOpen");
  133. this.isNew = false;
  134. this.isEdited = false;
  135. this._open();
  136. this.fireEvent("postOpen");
  137. },
  138. create: function () {
  139. this.fireEvent("queryCreate");
  140. this.isNew = true;
  141. this._open();
  142. this.fireEvent("postCreate");
  143. },
  144. edit: function () {
  145. this.fireEvent("queryEdit");
  146. this.isEdited = true;
  147. this._open();
  148. this.fireEvent("postEdit");
  149. },
  150. _open: function () {
  151. this.fireEvent("queryLoad");
  152. if(this._queryLoad)this._queryLoad();
  153. if( this.options.hasMask ){
  154. this.formMaskNode = new Element("div.formMaskNode", {
  155. "styles": this.css.formMaskNode,
  156. "events": {
  157. "mouseover": function (e) {
  158. e.stopPropagation();
  159. },
  160. "mouseout": function (e) {
  161. e.stopPropagation();
  162. },
  163. "click": function (e) {
  164. e.stopPropagation();
  165. },
  166. "mousewheel": function (e) {
  167. if (e.stopPropagation) e.stopPropagation();
  168. else e.cancelBubble = true;
  169. if (e.preventDefault) e.preventDefault();
  170. else e.returnValue = false;
  171. },
  172. "DOMMouseScroll": function (e) {
  173. if (e.stopPropagation) e.stopPropagation();
  174. else e.cancelBubble = true;
  175. if (e.preventDefault) e.preventDefault();
  176. else e.returnValue = false;
  177. }
  178. }
  179. }).inject( this.container || this.app.content);
  180. }
  181. this.formAreaNode = new Element("div.formAreaNode", {
  182. "styles": this.css.formAreaNode
  183. });
  184. this.createFormNode();
  185. if( this.formMaskNode ){
  186. this.formAreaNode.inject(this.formMaskNode , "after");
  187. }else{
  188. this.formAreaNode.inject( this.container || this.app.content );
  189. }
  190. if (this.options.ifFade){
  191. this.formAreaNode.fade("in");
  192. }else{
  193. this.formAreaNode.setStyle("opacity", 1);
  194. }
  195. this.setFormNodeSize();
  196. this.setFormNodeSizeFun = this.setFormNodeSize.bind(this);
  197. if( this.app && this.app.addEvent )this.app.addEvent("resize", this.setFormNodeSizeFun);
  198. if (this.options.draggable && this.formTopNode) {
  199. var size = (this.container || this.app.content).getSize();
  200. var nodeSize = this.formAreaNode.getSize();
  201. this.formAreaNode.makeDraggable({
  202. "handle": this.formTopNode,
  203. "limit": {
  204. "x": [0, size.x - nodeSize.x],
  205. "y": [0, size.y - nodeSize.y]
  206. },
  207. "onDrag": function(){
  208. this.fireEvent("drag");
  209. }.bind(this),
  210. "onComplete": function(){
  211. this.fireEvent("dragCompleted");
  212. }.bind(this)
  213. });
  214. }
  215. if( ( this.options.closeByClickMask || (!this.isNew && !this.isEdited && this.options.closeByClickMaskWhenReading) ) && this.formMaskNode ){
  216. this.formMaskNode.addEvent("click", function(e){
  217. this.close(e)
  218. }.bind(this));
  219. }
  220. if (this.options.resizeable){
  221. this.resizeNode = new Element("div.resizeNode", {
  222. "styles": this.css.resizeNode
  223. }).inject(this.formNode);
  224. this.formAreaNode.makeResizable({
  225. "handle": this.resizeNode,
  226. "limit": {x:[ this.options.minWidth, null], y:[this.options.minHeight, null]},
  227. "onDrag": function(){
  228. var size = this.formAreaNode.getComputedSize();
  229. this.setNodesSize( size.width, size.height );
  230. this.fireEvent("resize");
  231. }.bind(this),
  232. "onComplete": function(){
  233. var size = this.formAreaNode.getComputedSize();
  234. this.options.width = size.width;
  235. this.options.height = size.height;
  236. if( this.oldCoordinate ){
  237. this.oldCoordinate.width = size.width;
  238. this.oldCoordinate.height = size.height;
  239. }
  240. this.fireEvent("resizeCompleted");
  241. this.fireEvent("afterResize");
  242. }.bind(this)
  243. });
  244. }
  245. if(this._postLoad)this._postLoad();
  246. this.fireEvent("postLoad");
  247. },
  248. createFormNode: function () {
  249. var _self = this;
  250. this.formNode = new Element("div.formNode", {
  251. "styles": this.css.formNode
  252. }).inject(this.formAreaNode);
  253. if (this.options.hasTop) {
  254. this.createTopNode();
  255. }
  256. if (this.options.hasIcon) {
  257. this.formIconNode = new Element("div.formIconNode", {
  258. "styles": this.isNew ? this.css.formNewNode : this.css.formIconNode
  259. }).inject(this.formNode);
  260. }
  261. this.createContent();
  262. //formContentNode.set("html", html);
  263. if (this.options.hasBottom && (this.isNew || this.isEdited || !this.options.hideBottomWhenReading) ) {
  264. this.createBottomNode();
  265. }
  266. this._setCustom();
  267. if( this.options.hasScroll ){
  268. //this.setScrollBar(this.formTableContainer)
  269. if( this.options.scrollType == "window" ){
  270. this.formContentNode.setStyle("overflow","auto");
  271. this.formTableContainer.setStyle("overflow","visible");
  272. }else{
  273. MWF.require("MWF.widget.ScrollBar", function () {
  274. new MWF.widget.ScrollBar(this.formTableContainer, {
  275. "indent": false,
  276. "style": "xApp_TaskList",
  277. "where": "before",
  278. "distance": 30,
  279. "friction": 4,
  280. "axis": {"x": false, "y": true},
  281. "onScroll": function (y) {
  282. //var scrollSize = _self.viewContainerNode.getScrollSize();
  283. //var clientSize = _self.viewContainerNode.getSize();
  284. //var scrollHeight = scrollSize.y - clientSize.y;
  285. //if (y + 200 > scrollHeight && _self.view && _self.view.loadElementList) {
  286. // if (!_self.view.isItemsLoaded) _self.view.loadElementList();
  287. //}
  288. }
  289. });
  290. }.bind(this));
  291. }
  292. }
  293. },
  294. _setCustom : function(){
  295. },
  296. createTopNode: function () {
  297. this.fireEvent("queryCreateTop");
  298. if (!this.formTopNode) {
  299. this.formTopNode = new Element("div.formTopNode", {
  300. "styles": this.css.formTopNode
  301. }).inject(this.formNode);
  302. if( this.options.topClass ){
  303. this.formTopNode.addClass( this.options.topClass );
  304. }
  305. if(this.options.hasTopIcon){
  306. this.formTopIconNode = new Element("div", {
  307. "styles": this.css.formTopIconNode
  308. }).inject(this.formTopNode)
  309. }
  310. this.formTopTextNode = new Element("div", {
  311. "styles": this.css.formTopTextNode,
  312. "text": this.options.title
  313. }).inject(this.formTopNode);
  314. if (this.options.closeAction) {
  315. this.formTopCloseActionNode = new Element("div", {
  316. "styles": this.css.formTopCloseActionNode,
  317. "title" : MWF.xApplication.Template.LP.MPopupForm.close
  318. }).inject(this.formTopNode);
  319. this.formTopCloseActionNode.addEvent("click", function ( ev ) {
  320. this.close();
  321. ev.stopPropagation();
  322. }.bind(this))
  323. }
  324. if( this.options.maxAction ){
  325. this.formTopMaxActionNode = new Element("div", {
  326. "styles": this.css.formTopMaxActionNode,
  327. "title" : MWF.xApplication.Template.LP.MPopupForm.max
  328. }).inject(this.formTopNode);
  329. this.formTopMaxActionNode.addEvent("click", function () {
  330. this.maxSize()
  331. }.bind(this));
  332. this.formTopRestoreActionNode = new Element("div", {
  333. "styles": this.css.formTopRestoreActionNode,
  334. "title": MWF.xApplication.Template.LP.MPopupForm.restore
  335. }).inject(this.formTopNode);
  336. this.formTopRestoreActionNode.addEvent("click", function () {
  337. this.restoreSize()
  338. }.bind(this));
  339. this.formTopNode.addEvent("dblclick", function(){
  340. this.switchMax();
  341. }.bind(this));
  342. }
  343. if(this.options.hasTopContent){
  344. this.formTopContentNode = new Element("div.formTopContentNode", {
  345. "styles": this.css.formTopContentNode
  346. }).inject(this.formTopNode);
  347. this._createTopContent();
  348. }
  349. }
  350. this.fireEvent("postCreateTop");
  351. //if (!this.formTopNode) {
  352. // this.formTopNode = new Element("div.formTopNode", {
  353. // "styles": this.css.formTopNode,
  354. // "text": this.options.title
  355. // }).inject(this.formNode);
  356. //
  357. // this._createTopContent();
  358. //
  359. // if (this.options.closeAction) {
  360. // this.formTopCloseActionNode = new Element("div.formTopCloseActionNode", {"styles": this.css.formTopCloseActionNode}).inject(this.formTopNode);
  361. // this.formTopCloseActionNode.addEvent("click", function () {
  362. // this.close()
  363. // }.bind(this))
  364. // }
  365. //}
  366. },
  367. _createTopContent: function () {
  368. },
  369. createContent: function () {
  370. this.formContentNode = new Element("div.formContentNode", {
  371. "styles": this.css.formContentNode
  372. }).inject(this.formNode);
  373. this.formTableContainer = new Element("div.formTableContainer", {
  374. "styles": this.css.formTableContainer
  375. }).inject(this.formContentNode);
  376. this.formTableArea = new Element("div.formTableArea", {
  377. "styles": this.css.formTableArea
  378. }).inject(this.formTableContainer);
  379. this._createTableContent();
  380. },
  381. _createTableContent: function () {
  382. var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
  383. //"<tr><td colspan='2' styles='formTableHead'>申诉处理单</td></tr>" +
  384. "<tr><td styles='formTableTitle' lable='empName'></td>" +
  385. " <td styles='formTableValue' item='empName'></td></tr>" +
  386. "<tr><td styles='formTableTitle' lable='departmentName'></td>" +
  387. " <td styles='formTableValue' item='departmentName'></td></tr>" +
  388. "<tr><td styles='formTableTitle' lable='recordDateString'></td>" +
  389. " <td styles='formTableValue' item='recordDateString'></td></tr>" +
  390. "<tr><td styles='formTableTitle' lable='status'></td>" +
  391. " <td styles='formTableValue' item='status'></td></tr>" +
  392. "<tr><td styles='formTableTitle' lable='appealReason'></td>" +
  393. " <td styles='formTableValue' item='appealReason'></td></tr>" +
  394. "<tr><td styles='formTableTitle' lable='appealDescription'></td>" +
  395. " <td styles='formTableValue' item='appealDescription'></td></tr>" +
  396. "<tr><td styles='formTableTitle' lable='opinion1'></td>" +
  397. " <td styles='formTableValue' item='opinion1'></td></tr>" +
  398. "</table>";
  399. this.formTableArea.set("html", html);
  400. MWF.xDesktop.requireApp("Template", "MForm", function () {
  401. this.form = new MForm(this.formTableArea, {empName: "xadmin"}, {
  402. isEdited: this.isEdited || this.isNew,
  403. itemTemplate: {
  404. empName: {text: "姓名", type: "innertext"},
  405. departmentName: {text: "部门", tType: "department", notEmpty: true},
  406. recordDateString: {text: "日期", tType: "date"},
  407. status: {text: "状态", tType: "number"},
  408. appealReason: {
  409. text: "下拉框",
  410. type: "select",
  411. selectValue: ["测试1", "测试2"]
  412. },
  413. appealDescription: {text: "描述", type: "textarea"},
  414. opinion1: {text: "测试", type: "button", "value": "测试"}
  415. }
  416. }, this.app);
  417. this.form.load();
  418. }.bind(this), true);
  419. },
  420. createBottomNode: function () {
  421. this.fireEvent("queryCreateBottom");
  422. this.formBottomNode = new Element("div.formBottomNode", {
  423. "styles": this.css.formBottomNode
  424. }).inject(this.formNode);
  425. this._createBottomContent();
  426. this.fireEvent("postCreateBottom");
  427. },
  428. _createBottomContent: function () {
  429. if( !this.options.buttonList ){
  430. this._createCancelActionNode();
  431. this._createOkActionNode();
  432. }else{
  433. debugger;
  434. this.options.buttonList.each(function (button) {
  435. if(button.type === "cancel"){
  436. this._createCancelActionNode( button.text || "" );
  437. }else if( button.type === "ok" ){
  438. this._createOkActionNode( button.text || "" );
  439. }else{
  440. }
  441. }.bind(this))
  442. }
  443. },
  444. _createCancelActionNode: function(text){
  445. this.cancelActionNode = new Element("div.formCancelActionNode", {
  446. "styles": this.css.formCancelActionNode,
  447. "text": text || this.lp.cancel
  448. }).inject(this.formBottomNode);
  449. this.cancelActionNode.addEvent("click", function (e) {
  450. this.cancel(e);
  451. }.bind(this));
  452. },
  453. _createOkActionNode: function(text){
  454. if (this.isNew || this.isEdited) {
  455. this.okActionNode = new Element("div.formOkActionNode", {
  456. "styles": this.css.formOkActionNode,
  457. "text": text || this.lp.ok
  458. }).inject(this.formBottomNode);
  459. if( this.options.okClass ){
  460. this.okActionNode.addClass( this.options.okClass );
  461. }
  462. this.okActionNode.addEvent("click", function (e) {
  463. this.ok(e);
  464. }.bind(this));
  465. }
  466. },
  467. cancel: function (e) {
  468. this.fireEvent("queryCancel");
  469. this.close();
  470. this.fireEvent("postCancel");
  471. },
  472. close: function (e) {
  473. this.fireEvent("queryClose");
  474. this._close();
  475. //if( this.form ){
  476. // this.form.destroy();
  477. //}
  478. if(this.setFormNodeSizeFun && this.app && this.app.removeEvent ){
  479. this.app.removeEvent("resize",this.setFormNodeSizeFun);
  480. }
  481. if( this.formMaskNode )this.formMaskNode.destroy();
  482. if( this.formAreaNode )this.formAreaNode.destroy();
  483. this.fireEvent("postClose");
  484. delete this;
  485. },
  486. _close: function(){
  487. },
  488. ok: function (e) {
  489. this.fireEvent("queryOk");
  490. var data = this.form.getResult(true, this.options.resultSeparator, true, false, true);
  491. if (data) {
  492. this._ok(data, function (json) {
  493. if (json.type == "error") {
  494. if( this.app && this.app.notice )this.app.notice(json.message, "error");
  495. } else {
  496. if( this.formMaskNode )this.formMaskNode.destroy();
  497. if( this.formAreaNode )this.formAreaNode.destroy();
  498. if (this.explorer && this.explorer.view)this.explorer.view.reload();
  499. if( this.app && this.app.notice)this.app.notice(this.isNew ? this.lp.createSuccess : this.lp.updateSuccess, "success");
  500. this.fireEvent("postOk");
  501. }
  502. }.bind(this))
  503. }
  504. },
  505. _ok: function (data, callback) {
  506. //this.app.restActions.saveDocument( this.data.id, data, function(json){
  507. // if( callback )callback(json);
  508. //}.bind(this), function( errorObj ){
  509. // var error = JSON.parse( errorObj.responseText );
  510. // this.app.notice( error.message, error );
  511. //}.bind(this));
  512. },
  513. switchMax : function(){
  514. if( !this.isMax ){
  515. this.maxSize();
  516. }else{
  517. this.restoreSize();
  518. }
  519. },
  520. maxSize: function(){
  521. if(!this.oldCoordinate)this.oldCoordinate = {
  522. width : this.options.width,
  523. height : this.options.height,
  524. top : this.options.top,
  525. left : this.options.left,
  526. bottom : this.options.bottom,
  527. right : this.options.right
  528. };
  529. this.options.width = "100%";
  530. this.options.height = "100%";
  531. this.options.top = null;
  532. this.options.left = null;
  533. this.options.bottom = null;
  534. this.options.right = null;
  535. this.setFormNodeSize();
  536. this.formTopMaxActionNode.setStyle("display","none");
  537. this.formTopRestoreActionNode.setStyle("display","");
  538. this.isMax = true;
  539. this.fireEvent("max");
  540. this.fireEvent("afterResize");
  541. },
  542. restoreSize : function(){
  543. if( this.oldCoordinate){
  544. this.options.width = this.oldCoordinate.width;
  545. this.options.height = this.oldCoordinate.height;
  546. this.options.top = this.oldCoordinate.top;
  547. this.options.left = this.oldCoordinate.left;
  548. this.options.bottom = this.oldCoordinate.bottom;
  549. this.options.right = this.oldCoordinate.right;
  550. }
  551. this.setFormNodeSize();
  552. this.formTopMaxActionNode.setStyle("display","");
  553. this.formTopRestoreActionNode.setStyle("display","none");
  554. this.isMax = false;
  555. this.fireEvent("restore");
  556. this.fireEvent("afterResize");
  557. },
  558. resetHeight: function( height, offset ){
  559. var h;
  560. if( height === "auto" ){
  561. var tableHeight = this.formTableArea.getSize().y;
  562. var tableContainerOffsetY = this.getOffsetY( this.formTableContainer );
  563. var formContentOffsetY = this.getOffsetY( this.formContentNode );
  564. var formTopHeight = this.formTopNode ? ( this.formTopNode.getSize().y + this.getOffsetY(this.formTopNode) ) : 0;
  565. var formBottomHeight = this.formBottomNode ? ( this.formBottomNode.getSize().y + this.getOffsetY(this.formBottomNode) ) : 0;
  566. h = tableHeight + tableContainerOffsetY + formContentOffsetY + formTopHeight + formBottomHeight + (offset || 0);
  567. }else{
  568. h = height + (offset || 0);
  569. }
  570. this.options.height = h;
  571. if( this.isMax )return;
  572. var s = this.lastStyle || {};
  573. this.setFormNodeSize(null, h, s.top, s.left );
  574. this.fireEvent("afterResize");
  575. },
  576. setSize: function(width, height){
  577. if( width )this.options.width = width;
  578. if( height )this.options.height = height;
  579. this.setFormNodeSize(width, height);
  580. this.fireEvent("afterResize");
  581. },
  582. setFormNodeSize: function (width, height, top, left, bottom, right) {
  583. this._beforeFormNodeSize();
  584. if (!width)width = this.options.width ? this.options.width : "50%";
  585. if (!height)height = this.options.height ? this.options.height : "50%";
  586. if (!top && top != 0 ) top = this.options.top; // ? this.options.top : 0;
  587. if (!left && left != 0) left = this.options.left; // ? this.options.left : 0;
  588. if (!bottom && bottom != 0) bottom = this.options.bottom; // ? this.options.bottom : 0;
  589. if (!right && right != 0) right = this.options.right; // ? this.options.right : 0;
  590. width = width.toString();
  591. height = height.toString();
  592. var allSize = ( this.container || this.app.content).getSize();
  593. var limitWidth = allSize.x; //window.screen.width
  594. var limitHeight = allSize.y; //window.screen.height
  595. if (this.options.isLimitSize){
  596. if( "%" != width.substr(width.length - 1, 1) ){
  597. if( allSize.x < parseInt(width) )width = allSize.x;
  598. }
  599. if( "%" != height.substr(height.length - 1, 1) ){
  600. if( allSize.y < parseInt(height) )height = allSize.y;
  601. }
  602. }
  603. //if( width != "auto" ){
  604. "string" == typeof width && (1 < width.length && "%" == width.substr(width.length - 1, 1)) && (width = parseInt(limitWidth * parseInt(width, 10) / 100, 10));
  605. this.options.minWidth > width && (width = this.options.minWidth);
  606. //}
  607. //if( height != "auto" ){
  608. "string" == typeof height && (1 < height.length && "%" == height.substr(height.length - 1, 1)) && (height = parseInt(limitHeight * parseInt(height, 10) / 100, 10));
  609. this.options.minHeight > height && (height = this.options.minHeight);
  610. //}
  611. var styles = {
  612. "width": "" + width + "px",
  613. "height": "" + height + "px"
  614. };
  615. if( top != null ){
  616. styles.top = "" + top + "px";
  617. styles.bottom = "auto";
  618. }else if( bottom != null ){
  619. styles.top = "auto";
  620. styles.bottom = "" + bottom + "px";
  621. }else{
  622. styles.top = "" + parseInt((limitHeight - height) / 2, 10) + "px";
  623. styles.bottom = "auto";
  624. }
  625. if( left != null ){
  626. styles.left = "" + left + "px";
  627. styles.right = "auto";
  628. }else if( right != null ){
  629. styles.left = "auto";
  630. styles.right = "" + right + "px";
  631. }else{
  632. styles.left = "" + parseInt((limitWidth - width) / 2, 10) + "px";
  633. styles.right = "auto";
  634. }
  635. this.lastStyle = styles;
  636. if( this.formAreaNode )this.formAreaNode.setStyles(styles);
  637. this._setFormNodeSize(styles);
  638. this.setNodesSize( width, height );
  639. },
  640. _beforeFormNodeSize : function(){
  641. },
  642. _setFormNodeSize: function( styles ){
  643. },
  644. setNodesSize: function(width, height){
  645. //if( height == "auto" )return;
  646. this.options.minWidth > width && (width = this.options.minWidth);
  647. this.options.minHeight > height && (height = this.options.minHeight);
  648. this.formNode.setStyles({
  649. "width": "" + width + "px",
  650. "height": "" + height + "px"
  651. });
  652. var iconSize = this.formIconNode ? this.formIconNode.getSize() : {x: 0, y: 0};
  653. var topSize = this.formTopNode ? this.formTopNode.getSize() : {x: 0, y: 0};
  654. var bottomSize = this.formBottomNode ? this.formBottomNode.getSize() : {x: 0, y: 0};
  655. var contentHeight = height - iconSize.y - topSize.y - bottomSize.y;
  656. var marginTop = parseFloat(this.formContentNode.getStyle( "margin-top" )) || 0;
  657. var marginBottom = parseFloat(this.formContentNode.getStyle( "margin-bottom" )) || 0;
  658. var formContentHeight = contentHeight - marginTop - marginBottom;
  659. this.formContentNode.setStyles({
  660. "height": "" + formContentHeight + "px"
  661. });
  662. var paddingTop = parseFloat( this.formContentNode.getStyle( "padding-top" )) || 0;
  663. var paddingBottom = parseFloat( this.formContentNode.getStyle( "padding-bottom" )) || 0;
  664. marginTop = parseFloat( this.formTableContainer.getStyle( "margin-top" )) || 0;
  665. marginBottom = parseFloat( this.formTableContainer.getStyle( "margin-bottom" )) || 0;
  666. var tablePaddingTop = parseFloat( this.formTableContainer.getStyle( "padding-top" )) || 0;
  667. var tablePaddingTBottom = parseFloat( this.formTableContainer.getStyle( "padding-bottom" )) || 0;
  668. var formTableHeight = contentHeight - marginTop - marginBottom - paddingTop - paddingBottom - tablePaddingTop - tablePaddingTBottom;
  669. if( this.options.scrollType == "window" ){
  670. formTableHeight = formTableHeight - 10;
  671. }
  672. this.formTableContainer.setStyles({
  673. "height": "" + formTableHeight + "px"
  674. });
  675. this._setNodesSize( width, height, formContentHeight, formTableHeight );
  676. this.fireEvent("resizeForm");
  677. },
  678. _setNodesSize : function(width, height, formContentHeight, formTableHeight ){
  679. },
  680. getOffsetY : function(node){
  681. return (node.getStyle("margin-top").toInt() || 0 ) +
  682. (node.getStyle("margin-bottom").toInt() || 0 ) +
  683. (node.getStyle("padding-top").toInt() || 0 ) +
  684. (node.getStyle("padding-bottom").toInt() || 0 )+
  685. (node.getStyle("border-top-width").toInt() || 0 ) +
  686. (node.getStyle("border-bottom-width").toInt() || 0 );
  687. },
  688. getOffsetX : function(node){
  689. return (node.getStyle("margin-left").toInt() || 0 ) +
  690. (node.getStyle("margin-right").toInt() || 0 ) +
  691. (node.getStyle("padding-left").toInt() || 0 ) +
  692. (node.getStyle("padding-right").toInt() || 0 )+
  693. (node.getStyle("border-left-width").toInt() || 0 ) +
  694. (node.getStyle("border-right-width").toInt() || 0 );
  695. }
  696. });