13

如何设置面板“标题栏”中使用的图标？也许我需要自己添加一个图像，但如果是这样我想我需要在某个地方定义或配置它？

{
    xtype: 'treepanel',
    title: 'Projects',
    width: 200,
    store: Ext.data.StoreManager.lookup('projects'),
    tools: [
        {
            type: 'add', // this doesn't appear to work, probably I need to use a valid class
            tooltip: 'Add project',
            handler: function() {
                console.log('TODO: Add project');
            }
        },
        ...
    ]
},
4

4 回答 4

24

可以使用 type config 指定一组 25 个图标。检查http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

要获得添加符号使用

tools:[{
    type:'plus',
    tooltip: 'Add project',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // Add logic
    }
}]

指定的类型：'add'不在列表中

于 2012-05-21T10:28:34.447 回答
15

如果您想添加自己的工具类型并能够为其分配您自己的图像，您可以执行以下操作：

在您的 css 文件中添加一个 css 类：

.x-tool-mytool { background-image: url(path_to_your_image_file) !important; }

然后在您的工具中，只需使用“mytool”作为类型：

            {
                type:'mytool',
                tooltip: 'This is my tool',
                handler: function(event, toolEl, panel){
                    // my tool logic
                }
            }

确保在工具类型中使用与用于 css 类后缀的名称相同的名称。

于 2012-10-31T09:11:01.830 回答
4

根据 ExtJS 文档，这些预定义类型可用：

collapse, expand, maximize, minimize, resize, restore, move, close 

minus, plus, prev, next, pin, unpin, search, toggle, refresh

save, print, gear, help

right, left, up, down

可以输入任何想要的类型：

{type: 'YOURTYPE'}

同时提供15px图标 - 或者最好是图标精灵

（背景位置当然不适用于单个图标，但图标精灵）：

.x-tool-img.x-tool-YOURTYPE{
   background: url('../images/custom_tool_sprites.png') no-repeat 0 0;
}

来源：Ext.panel.Tool-cfg-type，codefx.biz。

于 2014-12-11T18:23:00.180 回答
1

我认为您的意思是“设置面板标题栏中使用的按钮”，而不是“设置图标”。您可以使用buttons面板的配置，而不是tools：

buttons: [{ 
   text: 'Add',
   tooltip: 'Add project',
   handler: function() {
      console.log('TODO: Add project');
   }
}]

您可以使用其他配置，如bbar（底栏）、fbar（页脚）、tbar（顶部）、lbar（左）、rbar（右）来定位工具栏。一个小通知是 config 对象buttons的默认值为xtype，button因此您无需显式指定它们。

于 2012-05-21T09:58:47.453 回答