分享一次ext:qtip的使用经历

这个迭代做了一个给表格单元格增加tooltip以显示完整内容的需求，实现这个需求Ext有两种解决方案，一是在grid的column上添加tooltip的配置项，不过既然是配置项，一般主要用于在渲染之前就知道显示内容的情况，我需要根据搜索出来的结果才能确定显示内容，所以这个方案pass。二是在metadata的attr里添加ext:qtip属性，这个metadata在column的renderer方法里就可以访问到，renderer就是用于渲染结果数据的，所以这个方案原理上肯定行得通。

开发过程跟想象的一样顺利，但是，在交付需求的过程中偶然发现，这个tooltip竟然有最大宽度限制，显示区域并没能适应内容宽度，导致部分文字超出了tooltip的显示区域。说实话，当然发现这个问题的时候有些虚，不知道咋解决这个问题。问了下专精前端的同事，说没遇到过类似的场景，只好自己动手，丰衣足食了。

一开始的想法是能不能通过改变qtip显示区域的样式来调整最大宽度，但想了一下似乎无从下手，于是转而考虑给显示内容套个标签，通过标签也话可以调整内容的格式，因为根据以往经验，ext的控件大多情况下都支持解释字符串里的html标签的，本着小步快走的原则，更改少量内容就验证结果。先在tooltip里加一个<br>标签，看看效果

metadata.attr = 'ext:qtip="' + value + '<br>' + value + '"';

验证成功，思路似乎没有问题，继续，给value套个<p>标签

metadata.attr = 'ext:qtip="<p>' + value + '</p>"';

显示没有问题，下面考虑换行，css样式里有个属性叫word-wrap可以自动换行，然后通过工具测量出tooltip的最大宽度是300px，那给<p>加个style“

metadata.attr = 'ext:qtip="<p style="' + 'word-wrap:break-word;width:300px">' + value + '</p>"';

这时坏了，连cell里显示的值都不对了，怀疑是引号的问题，可能是嵌套不对，也可能是引号写岔了，先简化代码，将显示内容提取一个变量出来

var qtip = '<p style="word-wrap:break-word;width:300px">'  + value + '</p>';
metadata.attr = 'ext:qtip="' + qtip + '"';

还是不对，那这时问题肯定就和新加的style有关系，要么是其实qtip里不支持标签的复杂用法，要么是style的语法写错了，要么是这些个style的双引号和qtip的双引号嵌套冲突了，而且到这时我对于到底能不能用html也不确定了（因为这之前我还用过<h1>，发现字没有变大，怀疑人生了）

接下来就一个个原因去排除，由于本身qtip里也存在字符串拼接，为了快速试错，我重写了qtip的值，一是换了能明显看出效果的<b><i>等标签，二是显示的值改用字符常量，便于编辑修改

var qtip = "<b>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';

粗体和斜体都出来了，所以html代码肯定没问题了，再试试简单的style

var qtip = "<b style='color:red'>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';

神奇的是这个红色样式起作用了，简直太激动人心了，下一步直接试换行的样式，因为字符串比较短，我设了个较短的宽度值

var qtip = "<b style='word-wrap:break-word;width:10px'>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';

这个时候没有效果，并没有在10px宽度的地方换行，宽度没有生效，有点失望，但转念一想，这个结果也没法说明break-word没有效果，于是加长字符串，再来一次

var qtip = "<b style='word-wrap:break-word;width:10px'>asdfsdasdfsdafasasdfsdafasdfdfasdfsdafasddf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';

exciting！在tooltip最大宽度的时候换行显示了，这就意味实际已经解决了换行的问题，最终代码就是下面这样子

var qtip = "<p style='word-wrap:break-word'>" + value + "</p>";
metadata.attr = 'ext:qtip="' + qtip + '"';

于是我回过头想为什么第一次一样的做法没成，对比了一下前后的代码，差别就是style的引号上，成功的这次是单引号，失败的那次是双引号，看来之前出问题就是qtip和style的引号冲突的问题，这是因为在重写qtip的那次操作把原来最外层的单引号换成了双引号，字符串常量用双引号一直都是我的编程习惯。一个小小的巧合，让我少走了一些弯路。

处理这个问题花了蛮长时间的，查了一些资料，在查资料的过程中，有一些意外收获，这些意外收获更好的帮助调整思路，有时候解决问题就是这样，单纯靠经验和技术也不一定能披荆斩棘，反而有时会陷入思维定势，这时候需要一些偶然来跳出定势，很可能问题在这时就迎仞而解，这种感觉特别美妙，本来还有些焦躁，但解决之后心情格外舒畅，就写了这篇文章记录一下。