0

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?

Attila O.
  • 15,659
  • 11
  • 54
  • 84
Simon
  • 1,463
  • 6
  • 34
  • 46

1 Answers1

4

$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' }
chrixian
  • 2,783
  • 2
  • 15
  • 16
  • Hi, thanks for your reply. I did use configs mentioned in your reply, only thing is that the UI is the one I created "btmbase"; i assume the problem is in locating the images properly. currently I put them in themes/images/default/pictos, however, still not work. although I want to put another folder. – Simon Aug 29 '11 at 20:04
  • you can specify an `images_path` in the config.rb for compass to an absolute path to your images or a `images_dir` relative to your project directory – chrixian Aug 30 '11 at 02:44