Как использовать ExtJS шаблон делегата добавить всплывающую подсказку на панели инструментов ExtJS

Question

я использовал ExtJS панель инструментов со многими buttons.can я знаю, как применить подсказку для того, что кнопки с делегатом рисунком

Answer 1

здесь моя кнопка на панели инструментов

xtype: 'toolbar', 
dock: 'top', 
id: 'toolbar-id', 
items: [ 
    { 
    xtype: 'button1', 
    id: 'button-id1', 
    cls: 'tb-btn', 
    qtipText: 'tool tip description', 
    qtipTitle: 'tool tip title' 
    }, 
    { 
    xtype: 'button2', 
    id: 'button-id2', 
    cls: 'tb-btn', 
    qtipText: 'tool tip description', 
    qtipTitle: 'tool tip title' 
    } 
    ] 

применить подсказку с помощью делегата шаблона

render: function(Component, eOpts) { 

    Component.tip = Ext.create('Ext.tip.ToolTip', { 
     target: Component.el, 
     delegate: '.tb-btn', 
     renderTo: Ext.getBody(), 
     listeners: { 
      beforeshow: function updateTipBody(tip) { 
       var btnData = Component.getComponent(tip.triggerElement.id); 
       tip.update("<div class='tol-box'><h4 class='tool-tip-title'>" + btnData.qtipTitle + '</h4><p>' + btnData.qtipText + "</p></div>"); 
      } 
     } 
    }); 
} 

Answer 2

Код должен выглядеть так:

var store = Ext.create('Ext.data.ArrayStore', { 
    fields: ['company', 'price', 'change'], 
    data: [ 
     ['3m Co',        71.72, 0.02], 
     ['Alcoa Inc',       29.01, 0.42], 
     ['Altria Group Inc',     83.81, 0.28], 
     ['American Express Company',   52.55, 0.01], 
     ['American International Group, Inc.', 64.13, 0.31], 
     ['AT&T Inc.',       31.61, -0.48] 
    ] 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    title: 'Array Grid', 
    store: store, 
    columns: [ 
     {text: 'Company', flex: 1, dataIndex: 'company'}, 
     {text: 'Price', width: 75, dataIndex: 'price'}, 
     {text: 'Change', width: 75, dataIndex: 'change'} 
    ], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

grid.getView().on('render', function(view) { 
    view.tip = Ext.create('Ext.tip.ToolTip', { 
     // The overall target element. 
     target: view.el, 
     // Each grid row causes its own seperate show and hide. 
     delegate: view.itemSelector, 
     // Moving within the row should not hide the tip. 
     trackMouse: true, 
     // Render immediately so that tip.body can be referenced prior to the first show. 
     renderTo: Ext.getBody(), 
     listeners: { 
      // Change content dynamically depending on which element triggered the show. 
      beforeshow: function updateTipBody(tip) { 
       tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"'); 
      } 
     } 
    }); 
}); 

Если вы хотите больше примеров или деталей, вы можете обратиться к this Site.