EXTJS 4.2 實現 gridpanel 鼠標懸停單元格以提示信息的方式顯示單元格內容。


     由於gridpanel的單元格里的文字太多時候,都由省略號代替,就想實現如題的功能,經過反復實驗,終於搞定了!直接上代碼:

 

     me.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
            if (view.tip == null) {  //這塊判斷很重要,不能每次都創建個tooltip,要不顯示會有問題。
                view.tip = Ext.create('Ext.tip.ToolTip', {
                    // The overall target element.
                    target: view.el,
                    // Each grid row causes its own separate show and hide.
                    delegate: view.itemSelector,
                    // Moving within the row should not hide the tip.
                    //  trackMouse: false,
                    // Render immediately so that tip.body can be referenced prior to the first show.
                    renderTo: Ext.getBody()

                });
            };
            var gridColums = view.getGridColumns();
            var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
             view.el.clean();
             view.tip.update(record.data[column.dataIndex]);
                           
                
            
        });
解釋下:這里截取主要的代碼,實際中,就是監聽你的表格itemmouseenter這個事件就行了!

效果如圖!




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM