ExtJS面板的"工具"按钮可用的图标

Question

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

{
    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');
            }
        },
        ...
    ]
},

- jm2

---

你尝试过这个吗：items:[{ icon : ///某个网址}] ？ - Leron

Answer 1

使用type配置可以指定一组包含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'不在列表中

- Jom

Answer 2

如果您想添加自己的工具类型并能够分配自己的图像，可以按照以下步骤进行：

在您的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类后缀中使用的相同名称。

- Farish

Answer 3

根据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'}

在提供15像素图标时 - 或者更好的是使用图标精灵（icon sprites）

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

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

sources: Ext.panel.Tool-cfg-type, codefx.biz.

- Martin Zeitler

Answer 4

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

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

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

- U and me