Question

我正在尝试创建一个自定义图标左侧对齐的按钮。我已将图标放在

中

“App \ touch \ resources \ images \”文件夹。

我使用了按钮的图标配置来指定图标的路径。这样做时，图标会显示在屏幕上，但不会完全显示。

请向我提供包含自定义图标而不是sencha默认图标的建议。

{  
    xtype:'button',     
   itemId: 'btnHome',
     height: 50,  
   icon: './touch/resources/images/Home_Icon.png',                          
  ui: 'plain'   ,  
  html: "Home"                                                  
}

Answer 1

您还可以使用css类来定义按钮的图像。

custom.css // css class

.mail图标{背景图像：网址（ '../图像/ mail.png'）重要;宽度：！48像素重要; ！高度：48像素的重要;背景重复：不重复; background-position：center center;}

源代码

              {
                    xtype: 'button',
                    id: 'btnMail',
                    itemId: 'btnMail',
                    ui: 'action',
                    icon: 'true',
                    iconCls: 'mail-icon'
                },

在上面的代码中，我在custom.css文件中定义了一个名为 mail-icon 的css类。并将此css类用作按钮的 iconcls 。

Answer 2

Touch 2.2或更高版本现在使用基于矢量的字体来定义新的自定义图标。我最近创建了这个新的应用程序，可以帮助您为Sencha Touch应用程序准备图标和相应的SCCS文件。这也已经与Sencha Architect项目进行了测试。

README解释了在Ico Moon网站上创建图标的步骤，并使用该工具将Ico Moon项目文件转换为SCSS，以便在Sencha Touch中使用。

https://github.com/tohagan/sencha-ico-moon

Answer 3

检查按钮并更改宽度和高度，对我来说，下面的css类可以解决这个问题。

.x-button .x-button-icon {
    width: 2.5em;
    height: 2.5em;
}

当我检查它时，宽度和高度都是1.5em。

在sencha touch 2.2.1中创建带有自定义图标的按钮

3 个答案: