Custom Style for Button on toolbar

[Mike6679]

I have a series of Buttons in a toolbar component. I need to style the buttons: I have my own images for normal and active states and do not want to use any of the Sencha pictos icons nor do I want a background gradient or border for the button. I have set up Compass / scss which generates a css file for theming but I'm not sure if thats the way I need to do this . I also would like to use an image directory of my choosing. What is the best way to accomplish this?

[sword-it]

hi Mike,

You can use html config for display images and custom style. For example..

Ext.toolbar({
   items:[
    {
        width:100,
         html: '<div style='background-color:green;'><img src='/yourImage'> Sample Button</div>'
     }
]
})

For more information see http://docs.sencha.com/touch/2-0/#!/...olbar-cfg-html

[jerome76]

You don't really have to go about Compass or scss. If you want, and this is what I did, create a .css file with all the css for the button you'd like. You can use this as an example:

(taken from sencha-touch.css [debug])

/* line 56, ../themes/stylesheets/sencha-touch/default/widgets/_buttons.scss */
.x-button {
  -webkit-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0.4em;
  border-radius: 0.4em;
  display: -webkit-box;
  display: box;
  -webkit-box-align: center;
  box-align: center;
  min-height: 1.8em;
  padding: .3em .6em;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
}
/* line 55, ../themes/stylesheets/sencha-touch/default/_mixins.scss */
.x-button, .x-toolbar .x-button {
  border: 1px solid #999999;
  border-top-color: #a6a6a6;
  color: black;
}

You can go into your own .css file and edit it to look something simple like:

.mybutton-red {
  background-image: url('path/to/image.png');
/*
If you add your image [button.png] to, let's say, resources/images, and your .css is located in
resources/css, you will have to set it like url('../images/button.png')
*/
}

Then when you create a button, you can add a 'cls' to it. Adding the 'cls' will add the css onto what is default for the button already (included in the main .css file you use).

{
    xtype: 'button',
    cls: 'mybutton-red',
    text: 'I am red',
}

[Mike6679]

Thanks for the suggestions. I decided to use compass after all to encode my icons in base 64 so they draw immediately when my app comes up. Only issue is the icon is drawn in white not color, I assuming this is because the sencha theme is overriding it . Any ideas why ?

In my scss file:

@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');
  }
}


@include custom-iconmask('custom_icon');
@include custom-iconmask('custom_icon_active');

Then for my button code:

Ext.define('epiduo_ped.view.Main', {
    extend: 'Ext.Panel',
    config: {
        itemId: 'main',
        fullscreen: true,
        layout: 'fit',
        items: [{
            xtype: 'toolbar',
            docked: 'bottom',
            items: [{
                xtype: 'button',
                                iconCls: 'custom_icon',
                                iconMask: true,
                text: '',
                                ui:'plain',
                handler: function(){
                    Main.back(this);
                }
            },

[jerome76]

Yeah I believe the icon mask is only rendered in black or white, but you can add a color gradient to it with the css.

[Mike6679]

hmmm, will the gradient make it render exactly as is (in color)? Otherwise how do I render my icons exactly as they are?

[jerome76]

The gradiant will overlay the white or black. I'm not sure about the color being as is. If you want it the way you created the color, you could always use the <img> tag in the text config of the button or a css class to add to the button with a background-image property, etc.

[Mike6679]

I'm trying to hold on to the base64 approach if I can, else I guess I will have to fall back to creating a class background-image. With that said, is below possible? It doesn't seem to be working, but not sure if I'm executing it correctly:

.my_class{
    
    width:            21px;
    height:           50px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAyCAYAAACzvpAYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExOTdBNUU2RjU1OTJGRkRERSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NUMwM0RDMDgyOUUxMUUxQTE1QkEzMTk1QUYwN0VFMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NUMwM0RCRjgyOUUxMUUxQTE1QkEzMTk1QUYwN0VFMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTkxNDA5RkEzODM1Rjc1OTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTk3QTVFNkY1NTkyRkZEREUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6/nbgFAAAA9klEQVR42uzY0Q2DIBAG4MP0vY7QDWQENtARukFX6Aau0E7gCu0GjNBOUDegRwIJxSuK4tv9CdEofgqniSqMMSCEgLlgP4WLk2sNtjrYfUfj5vrBIYHYgy/YLCZnzvmMD6bA3izPMPH+oDnpYrQiQAl5GeMNFdGpzkT1EjQ3Moni0GtX8Zy0VFHC9cGsy5Wsvr25zfp83Cgn1W83zKsFO2pO1caCNT+oeyTlRlT5KfBXei50a8kQPUKZqBCVUDAV7BCPvgp5Y4i+C6F69+EzyiijjDLKKKOMMroe1dTnYGYe/pVUpH4iuA+D+C1bY/8x8Z8AvgIMAD21Jt9dWl/IAAAAAElFTkSuQmCC');
}

items: [{
            xtype: 'toolbar',
            docked: 'bottom',
            items: [{
                xtype: 'button',
                                cls: 'my_class',
                               text: '',
                                ui:'plain',
                handler: function(){
                    Main.back(this);
                }
                                 ...

[Mike6679]

Gave up on the base64 . background-image worked, but its cropping my image in the toolbar. I'll create another post for that though. -thx

[lestu]

It's possible to use full color icons with a very simple custom mixin.

/**
 * Includes a base64-encoded color icon for use within tab bars and buttons
 *
 *     @include pictos-icon('attachment');
 *
 * @param {string} $name The name of the icon to be included. This is to  match the name of the icon file (located at  resources/themes/images/default/pictos) without its extention (.png).
 */
@mixin pictos-icon($name) {
  .x-button-icon.#{$name},
  .x-button .x-button-icon.x-icon-mask.#{$name} {
    background-image: theme_image($theme-name, "pictos/" + $name + ".png");
  }
}

http://scydev.ch/index.php?option=co...mid=59&lang=de