用ExtJs為表格單元格增加Tooltips浮動信息

　　ExtJs證實了其十分強大的界面定制能力其中的提供的ToolTips功能比HTML裡的如下語句定制性更強完全可以代替如下功能          <a title=TIPS>Some Text</a>

　　ExtJs是通過ExtToolTip和ExtQuickTips兩個組件來實現浮動提示功能的其中ExtToolTip的定制功能很強具體效果可以參考具體配置代碼如下          /*
         * Ext JS Library
         * Copyright(c) Ext JS LLC
         *
         *
         *
         */
        ExtonReady(function(){
            new ExtToolTip({
                target: tip
                html: A very simple tooltip
            });
            new ExtToolTip({
                target: ajaxtip
                width:
                autoLoad: {url: l}
                dismissDelay: // auto hide after seconds
            });
            new ExtToolTip({
                target: tip
                html: Click the X to close me
                title: My Tip Title
                autoHide: false
                closable: true
                draggable:true
            });
            new ExtToolTip({
                target: tracktip
                title: Mouse Track
                width:
                html: This tip will follow the mouse while it is over the element
                trackMouse:true
            });
            ExtQuickTipsinit();
        });

　　但是ExtToolTip的缺點也是很明顯的他需要在配置中寫入提示內容文本這樣如果想在表格中引用給表格中的某一列增加浮動提示這種情況就很不方便代碼也會十分混亂（當然有高手是可以通過函數解決這個問題的請高手指點）ExtJs增加了一個擴展組件就是ExtQuickTips實際上正好解決這個問題支持在超文本中定義浮動提示的內容這樣用ASPNET的數據綁定組件引用起來十分方便界面也比HTML中的那個缺省的樣式好看唯一的缺點是QuickTips的定制沒有ToolTip那麼靈活像上面展示的支持拖拽鼠標點擊關閉AJAX都不好實現但總比沒有強下面我就說說這個QuickTips怎麼具體配置

　　首先在header裡增加ExtJS的引用

　　          <link rel=stylesheet type=text/css />
        <script type=text/javascript src=ext/extbasejs> </script>
        <script type=text/javascript src=ext/extalljs> </script>

　　然後再在header裡對ExtQuickTips配置

　　ExtQuickTipsinit(); 是必須的

　　Extapply(ExtQuickTipsgetQuickTip(){}); 是可選的如果你想使用缺省配置就完全可以省略掉這一段

　　maxWidth 最大寬度

　　minWidth 最小寬度

　　showDelay 延時顯示（毫秒）

　　trackMouse 隨著鼠標移動

　　hideDelay 延時自動隱藏 （缺省為true）

　　closable 顯示關閉圖標（但是這個圖標顯然只是一個樣子鼠標點擊不到它！）

　　autoHide 自動隱藏 （這個配置沒用處不管是真是假都自動隱藏實際需要用下面的dismissDelay來控制）

　　draggable 支持用鼠標拖動（實際上這個選項也不起作用因為鼠標根本移動不到這裡！）

　　dismissDelay 這個才是最有用的選項否則你完全可以省掉這段Extapply的配置因為缺省情況下這個浮動提示是經過一段時間以後就自動隱藏只有通過設置這個值為來關閉自動隱藏浮動提示！          <script type=text/javascript>
        ExtQuickTipsinit();
        Extapply(ExtQuickTipsgetQuickTip()
        {
            //maxWidth:
            //minWidth:
            //showDelay:
            //trackMouse: true
            //hideDelay: true
            //closable: true
            //autoHide: false
            //draggable: true
            dismissDelay:
        });
        </script>

　　最後在body裡增加對ExtQuickTips的引用qtitile可以視情況而定可以省掉而僅僅保留qtip在qtip裡增加綁定內容

　　<input type=button value=OK
        class=tiptarget ext:qtitle=OK Button ext:qtip=This is a quick tip from markup!>
        </input>
        <asp:ListView  >
        <ItemTemplate>
        <div id=sample
        ext:qtitle=<%# Eval(TipsTitleField) %> ext:qtip=<%# Eval(TipsField) %>>
        <%# Eval(SampleField) %>
        </div>
        </ItemTemplate>
        </asp:ListView>

From:http://tw.wingwit.com/Article/program/ASP/201311/21856.html