日期:2014-05-16  浏览次数:20382 次

土方法解决extjs3.0 MessageBox 自适应宽度
在使用extjs3.0的MessageBox时,碰到自适应宽度的问题,

案件重现:
1.先提示内容较长的信息
  Ext.Msg.alert('内容比较长长长长长长长长长!');

 

2.再提示内容较短的信息
  Ext.Msg.alert('内容有点短啊!');




3.再次提示内容较长的信息(信息长度至少比第2点的内容长时,出现换行)
  Ext.Msg.alert('内容比第2点长就可以了!');





4.再次提示第1点的较长内容看看(跟第3一样出现换行)




按顺序从1-3弹出,其中第1和第2个msgbox窗口宽度都能够自适应,第3个和第4个msgbox的宽度却没有自适应文字宽度,而是出现文字换行。


网上的解决方法不多,1种为重新设置宽度,1种为修改源码,这两种都不适合我,最后自己对着api一个个遍历猜测,最终得下面的土方法:

Ext.onReady(function(){
  var fixSpace = []; //用200个不换行的空格填充,撑宽宽度
  for(var i=0; i<20; i++){
    fixSpace.push("&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;");
  }
  //取出msgbox的window,并在隐藏时,重新设置相当长的一段内容
  //(这内容用其它能占位的字符代替也可以)
  //因为Ext.Msg是单例对象,所以只要在onReady时加入下面的代码即可达到全局设置的效果
  Ext.Msg.getDialog().on("hide", function(self){
    Ext.Msg.updateText(fixSpace.join(""));
  });
});


由于阅读源码对于我实在难度过大,所以只能以此土方法治标;
如果有更好的方法,欢迎留言给我