如何將自定義css工具提示添加到extjs列標題中？

Question

我是extjs的新手。我試圖添加工具提示最好是基於列標題的CSS。 我該如何去使用css將自定義工具提示添加到extjs列標題？ extjs的默認方式似乎不起作用。

我嘗試使用自定義CSS工具提示頁眉和它沒有工作..它是在所有可能的ExtJS的自定義工具提示的頭？

感謝

var listView = Ext.create('Ext.grid.Panel', { 
     store: mystore, 
     multiSelect: true, 
     splitHandleWidth: 10, 
     columnLines: true, 
     viewConfig: { 
     emptyText: 'No images to display' 
     }, 

     renderTo: containerEl, 

     columns: [{ 
     text: '<a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span></a>', 
     flex: 10, 
     dataIndex: 'CName', 
     tooltip: 'C Name Some name test', 

     renderer: function (value, metaData, record) { 
        return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value); 
       } 
     }, { 
     text: getString('notif.instance'), 
     flex: 30, 
     dataIndex: 'IDisplayName', 
     renderer: function (value, metaData, record) { 


    return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value); 
       } 
     }] 
    }); 

CSS

 .ttip { 
      border-bottom: 0px dotted #000000; color: #000000; outline: none; 
    /*  cursor: help; */ 
      text-decoration: none; 
      position: relative; 
     } 
     .ttip span { 
      margin-left: -999em; 
      position: absolute;text-decoration: none; 
     } 
     .ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;} 
     .ttip:hover span { 
      border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
      font-family: Calibri, Tahoma, Geneva, sans-serif; 
      position: absolute; left: 1em; top: 2em; z-index: 9999999; 
      margin-left: 0; width: 250px; 
     } 
     .ttip:hover img { 
      border: 0; margin: -10px 0 0 -55px; 
      float: left; position: absolute; 
     } 
     .ttip:hover em { 
      font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; 
      display: block; padding: 0.2em 0 0.6em 0; 
     } 
     .classic { padding: 0.8em 1em; } 
     .custom { padding: 0.5em 0.8em 0.8em 2em; } 
     * html a:hover { background: transparent; } 
     .classic {background: #FFFFAA; border: 1px solid #FFAD33; } 
     .critical { background: #FFCCAA; border: 1px solid #FF3334; } 
     .help { background: #9FDAEE; border: 1px solid #2BB0D7; } 
     .info { background: #9FDAEE; border: 1px solid #2BB0D7; } 
     .warning { background: #FFFFAA; border: 1px solid #FFAD33; } 

​ 

Answer 1

在你列的定義，你只需要設置的提示參數，就像這樣：

var cm = new Ext.grid.ColumnModel([ 
    { 
    xtype: 'column', 
    header: '<img src="../images/lupa.png">', 
    align: 'center', 
    dataIndex: 'consultar', 
    width: 50, 
    sortable: true, 
    menuDisabled: true, 
    tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo' 
    } 
]); 

我希望這可以幫助您

Answer 2

所以，我注意到你爲你的商店提供了代碼，但是你提出了一個關於網格的問題，這是一個不同的組件。確保您瞭解網格和商店之間的關係。您還應該使用模型定義，而不是在商店中配置字段 - 這是做事的老方法。

說了這麼多，我也想出了一個有趣的解決方案，以你的問題：如何將工具提示添加到列標題。

列定義需要一個'text'屬性，該屬性被轉換爲列標題。該文檔指出HTML標籤都是允許的，這意味着你可以設置一個提示是這樣的：

text: '<span data-qtip="hello">First Name</span>' 

其中，data-qtip提供工具提示文本。 請注意，必須在您的應用中通過以下方式啓用工具提示： Ext.QuickTips.init();。

要嘗試其他的東西，請使用文檔實時預覽功能來快速測試不同的配置並在操作中看到它們。 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column

UPDATE：工具提示屬性現在（因爲4.1倍），可在列配置。使用它。