我們在進行前段開發時,通常會出現這樣的問題:就是Ext的Grid每列可顯示的字數不是很多,在爲了佈局漂亮而不改變每列寬度的前提下,我們可以給需要顯示的列添加一個鼠標的懸停事件,添加一個QuickTips來顯示詳細的內容
renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
metadata.attr = 'ext:qtip="標籤詳細信息:<br/>' + value +'"';
return value;
}
這就是具體的實現代碼,很簡單吧 !其實就是給這一列加上renderer。
函數中的value,就是我們獲取到的值,所以我們只是添加了qtip,這樣一來,grid裏面顯示的是不完全的結果,把鼠標放在上面之後就顯示出了詳細的內容!
對了,不要忘了,還需要加上這句話
Ext.QuickTips.init();
來顯示qtip
給出ColumnModel中該列的定義
{
id : 'myTag',
header : '標籤',
align : 'center',
dataIndex : 'tag',
sortable: true,
renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
metadata.attr = 'ext:qtip="標籤詳細信息:<br/>' + value +'"';
return value;
}
}