ExtJS 4デスクトップ - デスクトップショートカットツールチップを設定する方法

Question

デスクトップショートカットのツールチップを設定する最適な方法は何ですか？

私のgetDesktopConfig（）では、フィールドiconCls、module、nameを持つショートカットデータの配列を作成します。ここでアレイへのユーザー・モジュールのショートカットを追加し、デスクトップ・ショートカットを作成するために使用されるショートカット・データ・ストアのデータプロパティとしてアレイを設定する例は次のとおり

Ext.define("MyDesktop.App", { 
extend: "Ext.ux.desktop.App", 

.... 

getDesktopConfig:   function() { 
    var b = this; 
    var a = b.callParent(); 

    ..... 

    shortcut_data.push({ 
      iconCls:  "users-shortcut", 
      module:   "users-module-window", 
      name:   "Users" 
     }); 

    ...... 

    return Ext.apply(a,{ 
     contextMenuItems: [{ 
      text:   "Dashboards", 
      handler:   b.onDashboards, 
      scope:   b 
     }], 
     shortcuts:   Ext.create("Ext.data.Store",{ 
      model:   "Ext.ux.desktop.ShortcutModel", 
      data:   shortcut_data 
     }), 
     wallpaper:   "/assets/MyApp_Wallpaper.jpg", 
     wallpaperStretch: false 
    }) 
}) 
}, 
..... 

Answer 1

ショートカットはによって生成されると仮定するとボタンのデリバティブを私はツールチップで行く：shortcut_dataのための 'いくつかのテキスト'設定。

Answer 2

ツールチップのExt.ux.desktop.ShortcutModelにフィールドを追加します。ここでは、qtipTextという名前を付けました。 Ext.uxのinitComponent方法で

shortcut_data.push({ 
      iconCls:  "users-shortcut", 
      module:   "users-module-window", 
      name:   "Users", 
      qtipText:  "Open Users Window" 
     }); 

：あなたのショートカットを定義するとき

Ext.define('Ext.ux.desktop.ShortcutModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'name' }, 
     { name: 'iconCls' }, 
     { name: 'module' }, 
     { name: 'qtipText' } 
    ] 
}); 

さて、ツールチップの値にこのフィールドを追加します。Ext.ux.desktop.ShortcutModelは次のようになり、今表示し.desktop.Desktopでは、shortcutsViewのitemclickイベントのリスナーがあることがわかります。ただ、itemmouseenterイベントのために別のリスナーを追加します。次のように

me.shortcutsView.on('itemmouseenter', me.onShortcutItemMouseEnter, me); 

は、ハンドラを定義します。

onShortcutItemMouseEnter: function (dataView, record) { 
    if(!dataView.tip) 
     dataView.tip = Ext.create('Ext.tip.ToolTip', { 
      target: dataView.el, 
      delegate: dataView.itemSelector,        
      trackMouse: true, 
      html: record.get('qtipText') 
     }); 
    else 
     dataView.tip.update(record.get('qtipText')); 
}, 

dataView.tip doesntのは初めてで存在し、私たちは、このビューのツールヒントを作成します。後で、ヒントテキストをレコード（マウスが移動したショートカットに対応）に従って更新するだけです。