這個(gè)迭代做了一個(gè)給表格單元格增加tooltip以顯示完整內(nèi)容的需求，實(shí)現(xiàn)這個(gè)需求Ext有兩種解決方案，一是在grid的column上添加tooltip的配置項(xiàng)，不過(guò)既然是配置項(xiàng)，一般主要用于在渲染之前就知道顯示內(nèi)容的情況，我需要根據(jù)搜索出來(lái)的結(jié)果才能確定顯示內(nèi)容捏萍，所以這個(gè)方案pass。二是在metadata的attr里添加ext:qtip屬性空闲，這個(gè)metadata在column的renderer方法里就可以訪問(wèn)到令杈，renderer就是用于渲染結(jié)果數(shù)據(jù)的，所以這個(gè)方案原理上肯定行得通碴倾。
開發(fā)過(guò)程跟想象的一樣順利逗噩，但是，在交付需求的過(guò)程中偶然發(fā)現(xiàn)跌榔，這個(gè)tooltip竟然有最大寬度限制异雁，顯示區(qū)域并沒(méi)能適應(yīng)內(nèi)容寬度，導(dǎo)致部分文字超出了tooltip的顯示區(qū)域僧须。說(shuō)實(shí)話纲刀，當(dāng)然發(fā)現(xiàn)這個(gè)問(wèn)題的時(shí)候有些虛，不知道咋解決這個(gè)問(wèn)題担平。問(wèn)了下專精前端的同事示绊，說(shuō)沒(méi)遇到過(guò)類似的場(chǎng)景锭部，只好自己動(dòng)手，豐衣足食了面褐。
一開始的想法是能不能通過(guò)改變qtip顯示區(qū)域的樣式來(lái)調(diào)整最大寬度拌禾，但想了一下似乎無(wú)從下手，于是轉(zhuǎn)而考慮給顯示內(nèi)容套個(gè)標(biāo)簽盆耽，通過(guò)標(biāo)簽也話可以調(diào)整內(nèi)容的格式蹋砚，因?yàn)楦鶕?jù)以往經(jīng)驗(yàn)扼菠，ext的控件大多情況下都支持解釋字符串里的html標(biāo)簽的摄杂，本著小步快走的原則，更改少量?jī)?nèi)容就驗(yàn)證結(jié)果循榆。先在tooltip里加一個(gè)<br>標(biāo)簽析恢，看看效果
metadata.attr = 'ext:qtip="' + value + '<br>' + value + '"';
驗(yàn)證成功，思路似乎沒(méi)有問(wèn)題秧饮，繼續(xù)映挂，給value套個(gè)<p>標(biāo)簽
metadata.attr = 'ext:qtip="<p>' + value + '</p>"';
顯示沒(méi)有問(wèn)題，下面考慮換行盗尸，css樣式里有個(gè)屬性叫word-wrap可以自動(dòng)換行柑船，然后通過(guò)工具測(cè)量出tooltip的最大寬度是300px，那給<p>加個(gè)style“
metadata.attr = 'ext:qtip="<p style="' + 'word-wrap:break-word;width:300px">' + value + '</p>"';
這時(shí)壞了泼各，連cell里顯示的值都不對(duì)了鞍时，懷疑是引號(hào)的問(wèn)題，可能是嵌套不對(duì)扣蜻，也可能是引號(hào)寫岔了逆巍，先簡(jiǎn)化代碼，將顯示內(nèi)容提取一個(gè)變量出來(lái)
var qtip = '<p style="word-wrap:break-word;width:300px">' + value + '</p>';
metadata.attr = 'ext:qtip="' + qtip + '"';
還是不對(duì)莽使，那這時(shí)問(wèn)題肯定就和新加的style有關(guān)系锐极，要么是其實(shí)qtip里不支持標(biāo)簽的復(fù)雜用法，要么是style的語(yǔ)法寫錯(cuò)了芳肌，要么是這些個(gè)style的雙引號(hào)和qtip的雙引號(hào)嵌套沖突了灵再，而且到這時(shí)我對(duì)于到底能不能用html也不確定了（因?yàn)檫@之前我還用過(guò)<h1>，發(fā)現(xiàn)字沒(méi)有變大亿笤，懷疑人生了）
接下來(lái)就一個(gè)個(gè)原因去排除翎迁，由于本身qtip里也存在字符串拼接，為了快速試錯(cuò)责嚷，我重寫了qtip的值鸳兽，一是換了能明顯看出效果的<b><i>等標(biāo)簽，二是顯示的值改用字符常量罕拂，便于編輯修改
var qtip = "<b>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';
粗體和斜體都出來(lái)了揍异，所以html代碼肯定沒(méi)問(wèn)題了全陨，再試試簡(jiǎn)單的style
var qtip = "<b style='color:red'>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';
神奇的是這個(gè)紅色樣式起作用了，簡(jiǎn)直太激動(dòng)人心了衷掷，下一步直接試換行的樣式辱姨，因?yàn)樽址容^短，我設(shè)了個(gè)較短的寬度值
var qtip = "<b style='word-wrap:break-word;width:10px'>asdfsdfasdf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';
這個(gè)時(shí)候沒(méi)有效果戚嗅，并沒(méi)有在10px寬度的地方換行雨涛，寬度沒(méi)有生效，有點(diǎn)失望懦胞，但轉(zhuǎn)念一想替久，這個(gè)結(jié)果也沒(méi)法說(shuō)明break-word沒(méi)有效果，于是加長(zhǎng)字符串躏尉，再來(lái)一次
var qtip = "<b style='word-wrap:break-word;width:10px'>asdfsdasdfsdafasasdfsdafasdfdfasdfsdafasddf</b><br><i>asdfasdfasdf</i>";
metadata.attr = 'ext:qtip="' + qtip + '"';
exciting蚯根！在tooltip最大寬度的時(shí)候換行顯示了，這就意味實(shí)際已經(jīng)解決了換行的問(wèn)題胀糜，最終代碼就是下面這樣子
var qtip = "<p style='word-wrap:break-word'>" + value + "</p>";
metadata.attr = 'ext:qtip="' + qtip + '"';
于是我回過(guò)頭想為什么第一次一樣的做法沒(méi)成颅拦，對(duì)比了一下前后的代碼，差別就是style的引號(hào)上教藻，成功的這次是單引號(hào)距帅，失敗的那次是雙引號(hào)，看來(lái)之前出問(wèn)題就是qtip和style的引號(hào)沖突的問(wèn)題括堤，這是因?yàn)樵谥貙憅tip的那次操作把原來(lái)最外層的單引號(hào)換成了雙引號(hào)碌秸，字符串常量用雙引號(hào)一直都是我的編程習(xí)慣。一個(gè)小小的巧合痊臭，讓我少走了一些彎路哮肚。
處理這個(gè)問(wèn)題花了蠻長(zhǎng)時(shí)間的，查了一些資料广匙，在查資料的過(guò)程中允趟，有一些意外收獲，這些意外收獲更好的幫助調(diào)整思路鸦致，有時(shí)候解決問(wèn)題就是這樣潮剪，單純靠經(jīng)驗(yàn)和技術(shù)也不一定能披荊斬棘，反而有時(shí)會(huì)陷入思維定勢(shì)分唾，這時(shí)候需要一些偶然來(lái)跳出定勢(shì)抗碰，很可能問(wèn)題在這時(shí)就迎仞而解，這種感覺(jué)特別美妙绽乔，本來(lái)還有些焦躁弧蝇，但解決之后心情格外舒暢，就寫了這篇文章記錄一下。
