ExtJS Gridは各Cellにtooltipを表示します.
3314 ワード
Ext JS 3.xでは、GridPanelの各Cellにtooltipが表示されますが、Cellの内容については、ウェブサイトで紹介されている「Ext JS 3.x\src\widgets\tips\ToopTip.js」の90行目から108行目の例を示します.
しかし、この例は、表示rowに限定され、セルには適さず、列を取った数を真似した場合に限ります.
この時はいつもfalseを返します.したがって、Cellオブジェクトやコンテンツが使えなくなります.しばらくの間の模索を経て、やっと見つけた原因は、上でdelegate属性をrowに指定しています.
これでCellの対象に行きます.tooltipが小さなことについて一つの例を示します.参考にしてください.
もしあなたのCellの中にオリジナルのデータがないならば、編集枠、色、ピクチャーなどを含んで、表示する時理想的な効果ではありませんて、自分で実際の情況によって自ら濾過することができます.
var myGrid = new Ext.grid.GridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
myGrid.tip = new Ext.ToolTip({
target: view.mainBody, // The overall target element.
delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be
// referenced prior to the first show.
listeners: { // Change content dynamically depending on which element
// triggered the show.
beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
}
}
});
});
しかし、この例は、表示rowに限定され、セルには適さず、列を取った数を真似した場合に限ります.
var cellIndex = view.findCellIndex(tip.triggerElement);
この時はいつもfalseを返します.したがって、Cellオブジェクトやコンテンツが使えなくなります.しばらくの間の模索を経て、やっと見つけた原因は、上でdelegate属性をrowに指定しています.
delegate: '.x-grid3-cell',
これでCellの対象に行きます.tooltipが小さなことについて一つの例を示します.参考にしてください.
listeners : {
scope : this,
render: function (grid){
//var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
grid.tip = new Ext.ToolTip({
target: view.mainBody, // The overall target element.
delegate: '.x-grid3-cell', // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be
anchor: 'top',
listeners: { // Change content dynamically depending on which element
// triggered the show.
beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
var cellIndex = view.findCellIndex(tip.triggerElement);
//
if(cellIndex < 3 || cellIndex >8)return false;
var cell = view.getCell(rowIndex, cellIndex);
tip.body.dom.innerHTML = cell.innerHTML;
}
}
});
}
}
この時、モニターはgridに置くだけで効果が得られます.もしあなたのCellの中にオリジナルのデータがないならば、編集枠、色、ピクチャーなどを含んで、表示する時理想的な効果ではありませんて、自分で実際の情況によって自ら濾過することができます.