Sencha touch theme: how to customize button icon?

Question

I am trying to use sass/compass to customize the Sencha touch theme for my app. However, I couldn't find a way to properly set up the icons for buttons.

@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;

No matter whether I disable/enable the use of default icons, the icons I used are still not out.

Another problem is that by using above style, the Ext.Msg.alert messagebox loses its UI, only a transparent panel with a button show up.

Anybody can give me some hints?

Answer 1

$include-default-uis: false is causing your msg box to be blank, you need to create your own css class if you're going to disable the default ones.

As for the icons not showing, you're disabling the default ones but including some specific ones.. assuming you're not getting any error messages about not locating the images when you compile the scss file, the problem likely lies with your button code... if you set the iconCls on the button make sure to also set iconMask: true try making a button with this config and see if it works..

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