Question

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

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

Answer 1

可以使用类型配置指定一组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'不在列表

中

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类后缀相同的名称。

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

同时提供 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。

Answer 4

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

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

您可以使用其他配置，例如bbar（底栏），fbar（页脚），tbar（顶部），lbar（左），{{1} }（右）用于定位工具栏。一个小小的提示是rbar中的配置对象的默认buttons为xtype，因此您无需明确指定它们。

可用于ExtJS Panel“工具”按钮的图标

4 个答案: