Question

为桌面快捷方式设置工具提示的最佳方法是什么？

在我的getDesktopConfig（）中，我创建了一个包含字段iconCls，module，name的快捷方式数据数组。下面是一个向数组添加Users模块快捷方式，然后将该数组设置为快捷方式数据存储的数据属性的示例，该数据存储用于创建桌面快捷方式：

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

为工具提示添加一个字段到Ext.ux.desktop.ShortcutModel。在这里，我把它命名为qtipText。 Ext.ux.desktop.ShortcutModel现在显示如下：

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

现在，当您定义快捷方式时，请为工具提示添加此字段的值：

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

在Ext.ux.desktop.Desktop的initComponent方法中，您将看到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第一次不存在，我们为此视图创建工具提示。之后，我们只是根据记录更新提示文本（对应于鼠标移动的快捷方式）。

Answer 2

假设快捷方式是由按钮衍生产生的，我会使用工具提示：'some text'配置为shortcut_data。

ExtJS 4桌面 - 如何设置桌面快捷方式工具提示

2 个答案: