Howto: use custom pictos with Sencha Touch

[themightychris]

This was a pain, and I drew from Steffen Hiller's blog post on this (http://www.senchatouchbits.com/9/adding-custom-embedded-inline-icons.html). Follow this procedure to use your own icon masks without having to add them to the SDK's pictos directory and keep everything CMD-friendly:

1) Add images_path setting after images_dir in MyApp/resources/sass/config.rb



# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
images_path = images_dir
output_style = :compressed
environment = :production


2) Define this new mixin that is a modified copy of pictos-iconmask -- I stashed mine in MyApp/resources/sass/mixins/_custom-iconmask.scss and then @import'd it, but you could drop it right in app.scss for simplicity


@mixin custom-iconmask($name) {
.x-tab .x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: inline-image('icons/' + $name + '.png');
}
}


3) Place your icons in MyApp/resources/images/icons/*.png

4) Use custom-iconmask just like you would use pictos-iconmask:


@include custom-iconmask('myapp-logo');



Sencha - please preconfigure compass for us so that inline-image() pulls from MyApp/resources/images out-of-the-box

[dongryphon]

Thanks for the report! I have opened a bug in our bug tracker.

[youdonotexist]

Make sure to add


-webkit-mask-repeat: no-repeat;

..to _custom-iconmask.scss


@mixin custom-iconmask($name) {
.x-tab .x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: inline-image('icons/' + $name + '.png');
-webkit-mask-repeat: no-repeat;
}
}


if you don't want the icon to repeat vertically.

[ericchaves]

I'm not a saas guy and I would like to ask if is it possible to have directories handled by this mixing/function?

For example, assuming the following directory structure



MyApp/resources/images/icons/myapp-logo.png
MyApp/resources/images/icons/icons_white/myapp-logo.png
MyApp/resources/images/icons/icons_gray/myapp-logo.png


I'd like to have the following calls working:



@include custom-iconmask('myapp-logo');
@include custom-iconmask('icons_white/myapp-logo');
@include custom-iconmask('icons_gray/mayapp-logo');

And then in my code to just reference it as



iconCls: 'myapp-logo';
iconCls: 'icons_white/myapp-logo';
iconCls: 'icons_gray/mayapp-logo';


Thanks!

[farion]

Still not possible to use inline-image with sencha cmd 3.1.0.256.

Regards arion.