【问题标题】:Sencha touch theme: how to customize button icon?Sencha touch 主题:如何自定义按钮图标?
【发布时间】:2011-11-06 02:50:17
【问题描述】:

我正在尝试使用 sass/compass 为我的应用自定义 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,只显示了一个带有按钮的透明面板。

谁能给我一些提示?

【问题讨论】:

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


    【解决方案1】:

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

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

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

    【讨论】:

    • 您好,感谢您的回复。我确实使用了您回复中提到的配置,唯一的问题是 UI 是我创建的“btmbase”;我认为问题在于正确定位图像。目前我将它们放在主题/图像/默认/象形图中,但是仍然无法正常工作。虽然我想放另一个文件夹。
    • 您可以在 config.rb 中指定一个 images_path 来指定图片的绝对路径或相对于项目目录的 images_dir
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多