Sencha触控主题:如何自定义按钮图标?

时间:2011-08-29 15:11:23

标签: css sencha-touch sass compass-sass sencha-touch-theming

我正在尝试使用sass /指南针为我的应用程序自定义Sencha触摸主题。但是,我找不到正确设置按钮图标的方法。

@import '../resources/themes/stylesheets/sencha-touch/default/_all';
$include-default-uis: false;
$include-default-icons: false;
@include sencha-toolbar-ui('basebar',#CEDFF5,'glossy');
@include sencha-toolbar-ui('btmbase',#FFFFFF,'glossy');
@include sencha-button-ui('base',#FFFFFF,'');
@include pictos-iconmask('settings');
@include pictos-iconmask('features');
@include pictos-iconmask('layer');
@include pictos-iconmask('identify');
@include pictos-iconmask('location');
$base_color:#CEDFF5;
$active-color: darken(saturate($base-color, 55%), 90%);
$alert-color:#54E344;
$button-radius:0;
$list-active-color:#E34457;
$list-pressed-color:#4457E3;
@include sencha-panel;
@include sencha-form;
@include sencha-buttons;
@include sencha-toolbar;
@include sencha-list;
@include sencha-layout;
@include sencha-msgbox;

无论我是否禁用/启用默认图标,我使用的图标仍未显示。

另一个问题是,通过使用上面的样式,Ext.Msg.alert消息框会丢失其UI,只显示一个带按钮的透明面板。

任何人都可以给我一些提示吗?

1 个答案:

答案 0 :(得分:4)

$include-default-uis: false导致你的msg框为空白,如果要禁用默认的css类,则需要创建自己的css类。

对于未显示的图标,您将禁用默认图标,但包括一些特定的图标。假设您在编译scss文件时没有收到有关未找到图像的任何错误消息,问题可能在于您的按钮代码...如果您在按钮上设置iconCls,请务必同时设置iconMask: true尝试使用此配置创建一个按钮,看看它是否有效..

{ iconCls: 'settings', iconMask: true, ui: 'plain' }