Ext结合my97在各浏览器里表现不一致

Question

前言: my97是一款日期时间js控件. 提供强大的功能. 不是广告的URL[url]www.my97.net[/url] (今天好像打不开~ :oops: )

这可能是EXT的问题.
经小弟测试, [color=blue]my97结合HTML的时候,在各个浏览器表现一致.[/color]

当用ext结合my97的时候, 问题来了...

首先是测试结果: 在IE.opera下测试通过; 在FF, safari下测试不通过. 没有测试chrome.

我的测试页面是: [color=blue]一个HTML结合my97的文本框A 一个EXT结合my97的文本框B.[/color]

测试步骤: (1) 刷新页面. 使文本框B得到焦点. FF.safari不出现控件.

      (2) 刷新页面. 是文本框A得到焦点. 控件出现在文本框A的位置. 然后使用文本框B得到焦点. 控件[color=red]仍然[/color]出现在文本框A的位置.

我的EXTT结合MY97的代码如下:
[code="js"]

/**日期时间控件的textFiled

• @param {} text 显示在面板上的文字
• @param {} dateTimeParams 日期时间控件的参数
• @return {} */ var dateTimeTextfield = function(text, dateTimeParams) { // 日期时间的默认参数 var defaultDateTimeParams = new function() { this.readOnly = true; // 不允许在文本输入框中修改时间 this.startDate = '%y-%M-01 00:00:00'; // 开始时间 this.dateFmt = 'yyyy-MM-dd HH:mm:ss'; // 格式化时间 this.isShowWeek = false; // 默认不显示周 this.alwaysUseStartDate = true; // 默认使用初始时间 }; return new Ext.form.TextField({ fieldLabel : text || '开始时间' ,labelWidth : 90 ,labelStyle : 'text-align:right;width:90;' ,listeners : { 'focus':function(field){ WdatePicker(dateTimeParams || defaultDateTimeParams); } } }); };

[/code]
[b]问题补充：[/b]
上图了..
文本框A是HTML做的. 文本框B是EXT做的.

第一个, 刷新页面, 当焦点在文本框B的时候, 日期控件没有出现!
[img]http://dl.iteye.com/upload/attachment/176907/4a5aea74-7ef7-3ce8-aa97-dceb76d6d28c.jpg[/img]

第二个, 刷新页面, 当焦点在文本框A的时候, 日期控件出现在它的下面.
[img]http://dl.iteye.com/upload/attachment/176909/25fa04e7-51e9-3af8-858b-8f0f5715cd3a.jpg[/img]

然后,将焦点至于文本框B内, 日期控件仍出现在文本框A的下面.
[img]http://dl.iteye.com/upload/attachment/176914/e0bb592d-4124-37a0-89a0-a99188b920ed.jpg[/img]

[b]问题补充：[/b]

再来个在IE, opera下正常的图片, 当焦点在B的时候, 控件出现并且位置正确
[img]http://dl.iteye.com/upload/attachment/176916/246de47f-5b2e-39af-8976-9cf98cfc2459.jpg[/img]

[b]问题补充：[/b]

再补充下我的进展吧.
我给EXT的textfiled一个id.
return new Ext.form.TextField({ id:'testId',.... });

同时使datePicker的构造参数el指向这个id:

dateTimeParams.el = id

这样. FF下控件就出来了,但是会出一个D is null的错~

涉及到源码了~ 看来要请作者来看看才知道为什么~
[b]问题补充：[/b]
更新后的代码如下
[code="js"]
/**日期时间控件的textFiled

• @param {} text 显示在面板上的文字
• @param {} dateTimeParams 日期时间控件的参数
• @return {} */ var dateTimeTextfield = function(text, dateTimeParams) { // 日期时间的默认参数 var defaultDateTimeParams = new function() { this.readOnly = true; // 不允许在文本输入框中修改时间 this.isShowWeek = false; // 默认不显示周 this.startDate = '%y-%M-01 00:00:00'; // 开始时间 this.dateFmt = 'yyyy-MM-dd HH:mm:ss'; // 格式化时间 this.alwaysUseStartDate = true; // 默认使用初始时间 }; var textfield = new Ext.form.TextField({ fieldLabel : text || '开始时间'//,id:'aa' ,labelWidth : 90 ,labelStyle : 'text-align:right;width:90;' }); // 构造参数取形参还是默认参数 var params = dateTimeParams ? dateTimeParams : defaultDateTimeParams; // 给构造参数的el属性增加值 params.el = textfield.id; // 为textfield增加得到焦点的监听 textfield.addListener('focus', function(field){WdatePicker(params);}); // 返回 return textfield; }; [/code] 这样, IE. FF都能显示出控件. 但是FF下会出一个D is null的错. [b]问题补充：[/b]

好的,感谢.
已上传了代码.

Answer 1

复制下面代码 替换原来的WdatePicker.js

[code="js"]

/*

• My97 DatePicker 4.7 Beta3 License: http://www.my97.net/dp/license.asp

• Compressed by JSA(www.xidea.org)
  */
  var $dp, WdatePicker;
  (function() {
  var _ = {
  $wdate : true,
  $dpPath : "",
  $crossFrame : true,
  doubleCalendar : false,
  autoUpdateOnChanged : false,
  position : {},
  lang : "auto",
  skin : "default",
  dateFmt : "yyyy-MM-dd",
  realDateFmt : "yyyy-MM-dd",
  realTimeFmt : "HH:mm:ss",
  realFullFmt : "%Date %Time",
  minDate : "1900-01-01 00:00:00",
  maxDate : "2099-12-31 23:59:59",
  startDate : "",
  alwaysUseStartDate : false,
  yearOffset : 1911,
  firstDayOfWeek : 0,
  isShowWeek : false,
  highLineWeekDay : true,
  isShowClear : true,
  isShowToday : true,
  isShowOK : true,
  isShowOthers : true,
  readOnly : false,
  errDealMode : 0,
  autoPickDate : null,
  qsEnabled : true,

  specialDates : null,
  specialDays : null,
  disabledDates : null,
  disabledDays : null,
  opposite : false,
  onpicking : null,
  onpicked : null,
  onclearing : null,
  oncleared : null,
  ychanging : null,
  ychanged : null,
  Mchanging : null,
  Mchanged : null,
  dchanging : null,
  dchanged : null,
  Hchanging : null,
  Hchanged : null,
  mchanging : null,
  mchanged : null,
  schanging : null,
  schanged : null,
  eCont : null,
  vel : null,
  errMsg : "",
  quickSel : [],
  has : {}
  

  };
  WdatePicker = U;
  var X = window, O = "document", J = "documentElement", C = "getElementsByTagName", V, A, T, I, b;
  switch (navigator.appName) {
  case "Microsoft Internet Explorer" :
  T = true;
  break;
  case "Opera" :
  b = true;
  break;
  default :
  I = true;
  break
  }
  A = L();
  if (_.$wdate)
  M(A + "skin/WdatePicker.css");
  V = X;
  if (_.$crossFrame) {
  try {
  while (V.parent[O] != V[O]
  && V.parent[O]C.length == 0)
  V = V.parent
  } catch (P) {
  }
  }
  if (!V.$dp)
  V.$dp = {
  ff : I,
  ie : T,
  opera : b,
  el : null,
  win : X,
  status : 0,
  defMinDate : .minDate,
  defMaxDate : _.maxDate,
  flatCfgs : []
  };
  B();
  if ($dp.status == 0)
  Z(X, function() {
  U(null, true)
  });
  if (!X[O].docMD) {
  E(X[O], "onmousedown", D);
  X[O].docMD = true
  }
  if (!V[O].docMD) {
  E(V[O], "onmousedown", D);
  V[O].docMD = true
  }
  E(X, "onunload", function() {
  if ($dp.dd)
  Q($dp.dd, "none")
  });
  function B() {
  V.$dp = V.$dp || {};
  obj = {
  $ : function($) {
  return (typeof $ == "string") ? X[O].getElementById($) : $
  },
  $D : function($, _) {
  return this.$DV(this.$($).value, _)
  },
  $DV : function(, $) {
  if (_ != "") {
  this.dt = $dp.cal.splitDate(_, $dp.cal.dateFmt);
  if ($)
  for (var A in $) {
  if (this.dt[A] === undefined)
  this.errMsg = "invalid property:" + A;
  this.dt[A] += $[A]
  }
  if (this.dt.refresh())
  return this.dt
  }
  return ""
  },
  show : function() {
  Q(this.dd, "block")
  },
  hide : function() {
  Q(this.dd, "none")
  },
  attachEvent : E
  };
  for (var $ in obj)
  V.$dp[$] = obj[$];
  $dp = V.$dp
  }
  function E(A, $, ) {
  if (T)
  A.attachEvent($, _);
  else {
  var B = $.replace(/on/, "");
  _._ieEmuEventHandler = function($) {
  return _($)
  };
  A.addEventListener(B, _._ieEmuEventHandler, false)
  }
  }
  function L() {
  var _, A, $ = X[O]C;
  for (var B = 0; B < $.length; B++) {
  _ = $[B].src.substring(0, $[B].src.toLowerCase()
  .indexOf("wdatepicker.js"));
  A = _.lastIndexOf("/");
  if (A > 0)
  _ = _.substring(0, A + 1);
  if ()
  break
  }
  return _
  }
  function F(F) {
  var E, C;
  if (F.substring(0, 1) != "/" && F.indexOf("://") == -1) {
  E = V.location.href;
  C = location.href;
  if (E.indexOf("?") > -1)
  E = E.substring(0, E.indexOf("?"));
  if (C.indexOf("?") > -1)
  C = C.substring(0, C.indexOf("?"));
  var G, I, $ = "", D = "", A = "", J, H, B = "";
  for (J = 0; J < Math.max(E.length, C.length); J++) {
  G = E.charAt(J).toLowerCase();
  I = C.charAt(J).toLowerCase();
  if (G == I) {
  if (G == "/")
  H = J
  } else {
  $ = E.substring(H + 1, E.length);
  $ = $.substring(0, $.lastIndexOf("/"));
  D = C.substring(H + 1, C.length);
  D = D.substring(0, D.lastIndexOf("/"));
  break
  }
  }
  if ($ != "")
  for (J = 0; J < $.split("/").length; J++)
  B += "../";
  if (D != "")
  B += D + "/";
  F = E.substring(0, E.lastIndexOf("/") + 1) + B + F
  }
  .$dpPath = F
  }
  function M(A, $, B) {
  var D = X[O]C.item(0), _ = X[O].createElement("link");
  if (D) {
  _.href = A;
  _.rel = "stylesheet";
  _.type = "text/css";
  if ($)
  _.title = $;
  if (B)
  _.charset = B;
  D.appendChild()
  }
  }
  function Z($, ) {
  E($, "onload", _)
  }
  function G($) {
  $ = $ || V;
  var A = 0, _ = 0;
  while ($ != V) {
  var D = $.parent[O]C;
  for (var F = 0; F < D.length; F++) {
  try {
  if (D[F].contentWindow == $) {
  var E = W(D[F]);
  A += E.left;
  _ += E.top;
  break
  }
  } catch (B) {
  }
  }
  $ = $.parent
  }
  return {
  "leftM" : A,
  "topM" : _
  }
  }
  function W(F) {
  if (F.getBoundingClientRect)
  return F.getBoundingClientRect();
  else {
  var A = {
  ROOT_TAG : /^body|html$/i,
  OP_SCROLL : /^(?:inline|table-row)$/i
  }, E = false, H = null, _ = F.offsetTop, G = F.offsetLeft, D = F.offsetWidth, B = F.offsetHeight, C = F.offsetParent;
  if (C != F)
  while (C) {
  G += C.offsetLeft;
  _ += C.offsetTop;
  if (S(C, "position").toLowerCase() == "fixed")
  E = true;
  else if (C.tagName.toLowerCase() == "body")
  H = C.ownerDocument.defaultView;
  C = C.offsetParent
  }
  C = F.parentNode;
  while (C.tagName && !A.ROOT_TAG.test(C.tagName)) {
  if (C.scrollTop || C.scrollLeft)
  if (!A.OP_SCROLL.test(Q(C)))
  if (!b || C.style.overflow !== "visible") {
  G -= C.scrollLeft;
  _ -= C.scrollTop
  }
  C = C.parentNode
  }
  if (!E) {
  var $ = a(H);
  G -= $.left;
  _ -= $.top
  }
  D += G;
  B += _;
  return {
  "left" : G,
  "top" : _,
  "right" : D,
  "bottom" : B
  }
  }
  }
  function N($) {
  $ = $ || V;
  var _ = $[O];
  _ = _[J] && _[J].clientHeight
  && _[J].clientHeight <= _.body.clientHeight ? _[J] : _.body;
  return {
  "width" : _.clientWidth,
  "height" : _.clientHeight
  }
  }
  function a($) {
  $ = $ || V;
  var B = $[O], A = B[J], _ = B.body;
  B = (A && A.scrollTop != null && (A.scrollTop > _.scrollTop || A.scrollLeft > _.scrollLeft))
  ? A
  : _;
  return {
  "top" : B.scrollTop,
  "left" : B.scrollLeft
  }
  }
  function D($) {
  src = $ ? ($.srcElement || $.target) : null;
  if ($dp && $dp.cal && !$dp.eCont && $dp.dd && Q($dp.dd) == "block"
  && src != $dp.el)
  $dp.cal.close()
  }
  function Y() {
  $dp.status = 2;
  H()
  }
  function H() {
  if ($dp.flatCfgs.length > 0) {
  var $ = $dp.flatCfgs.shift();
  $.el = {
  innerHTML : ""
  };
  $.autoPickDate = true;
  $.qsEnabled = false;
  K($)
  }
  }
  var R, $;
  function U(G, A) {
  $dp.win = X;
  B();
  G = G || {};
  if (A) {
  if (!F()) {
  $ = $ || setInterval(function() {
  if (V[O].readyState == "complete")
  clearInterval($);
  U(null, true)
  }, 50);
  return
  }
  if ($dp.status == 0) {
  $dp.status = 1;
  K({
  el : {
  innerHTML : ""
  }
  }, true)
  } else
  return
  } else if (G.eCont) {
  G.eCont = $dp.$(G.eCont);
  $dp.flatCfgs.push(G);
  if ($dp.status == 2)
  H()
  } else {
  if ($dp.status == 0) {
  U(null, true);
  return
  }
  if ($dp.status != 2)
  return;
  var D = C();
  if (D) {
  $dp.srcEl = D.srcElement || D.target;
  D.cancelBubble = true
  }
  G.el = $dp.$(G.el || $dp.srcEl);
  if (!G.el
  || G.el["My97Mark"] === true
  || G.el.disabled
  || (G.el == $dp.el && Q($dp.dd) != "none" && $dp.dd.style.left != "-1970px")) {
  $dp.el["My97Mark"] = false;
  return
  }
  K(G);
  if (G.el.nodeType == 1 && G.el["My97Mark"] === undefined) {
  $dp.el["My97Mark"] = false;
  try{
  var _ = D.type == "focus" ? "onclick" : "onfocus";
  E(G.el, _, function() {
  U.call(this, G)
  })}catch(e){}
  }
  }
  function F() {
  if (T && V != X && V[O].readyState != "complete")
  return false;
  return true
  }
  function C() {
  if (I) {
  func = C.caller;
  while (func != null) {
  var $ = func.arguments[0];
  if ($ && ($ + "").indexOf("Event") >= 0)
  return $;
  func = func.caller
  }
  return null
  }
  return event
  }
  }
  function S(, $) {
  return .currentStyle ? _.currentStyle[$] : document.defaultView
  .getComputedStyle(, false)[$]
  }
  function Q(_, $) {
  if (_)
  if ($ != null)
  .style.display = $;
  else
  return S(, "display")
  }
  function K(H, $) {
  for (var D in )
  if (D.substring(0, 1) != "$")
  $dp[D] = _[D];
  for (D in H)
  if ($dp[D] !== undefined)
  $dp[D] = H[D];
  var E = $dp.el ? $dp.el.nodeName : "INPUT";
  if ($ || $dp.eCont
  || new RegExp(/input|textarea|div|span|p|a/ig).test(E))
  $dp.elProp = E == "INPUT" ? "value" : "innerHTML";
  else
  return;
  if ($dp.lang == "auto")
  $dp.lang = T
  ? navigator.browserLanguage.toLowerCase()
  : navigator.language.toLowerCase();
  if (!$dp.dd
  || $dp.eCont
  || ($dp.lang && $dp.realLang && $dp.realLang.name != $dp.lang
  && $dp.getLangIndex && $dp.getLangIndex($dp.lang) >= 0)) {
  if ($dp.dd && !$dp.eCont)
  V[O].body.removeChild($dp.dd);
  if (.$dpPath == "")
  F(A);
  var B = " + _.$dpPath
  + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\">";
  if ($dp.eCont) {
  $dp.eCont.innerHTML = B;
  Z($dp.eCont.childNodes[0], Y)
  } else {
  $dp.dd = V[O].createElement("DIV");
  $dp.dd.style.cssText = "position:absolute;z-index:19700";
  $dp.dd.innerHTML = B;
  V[O].body.insertBefore($dp.dd, V[O].body.firstChild);
  Z($dp.dd.childNodes[0], Y);
  if ($)
  $dp.dd.style.left = $dp.dd.style.top = "-1970px";
  else {
  $dp.show();
  C()
  }
  }
  } else if ($dp.cal) {
  $dp.show();
  $dp.cal.init();
  if (!$dp.eCont)
  C()
  }
  function C() {
  var F = $dp.position.left, B = $dp.position.top, C = $dp.el;
  if (C != $dp.srcEl && (Q(C) == "none" || C.type == "hidden"))
  C = $dp.srcEl;
  var H = W(C), $ = G(X), D = N(V), A = a(V), E = $dp.dd.offsetHeight, _ = $dp.dd.offsetWidth;
  if (isNaN(B)) {
  if (B == "above"
  || (B != "under" && (($.topM + H.bottom + E > D.height) && ($.topM
  + H.top - E > 0))))
  B = A.top + $.topM + H.top - E - 3;
  else
  B = A.top + $.topM + H.bottom;
  B += T ? -1 : 1
  } else
  B += A.top + $.topM;
  if (isNaN(F))
  F = A.left + Math.min($.leftM + H.left, D.width - _ - 5)
  - (T ? 2 : 0);
  else
  F += A.left + $.leftM;
  $dp.dd.style.top = B + "px";
  $dp.dd.style.left = F + "px"
  }
  }
  })()
  [/code]