Using a new Button UI specification

[jhoweaa]

I'm trying to create a custom button UI for my application. I've @included the extjs-button-ui mixin and tweaked some colors and the buttons look fine in Chrome, Firefox and IE 9. However, if I put my IE into a lower version, the borders of the buttons disappear. I can see that the frame of the button is trying to access images that don't exist. I've 'built' my application using Sencha Cmd so I was under the impression that images would have been constructed for my button. Clearly I was mistaken or I did something wrong (or I didn't do something that I needed to) It would be nice to have a simple step-by-step guide to using the 'ui' templates. I followed the instructions in the 'Creating new Ext JS UIs' but it only partially worked. Here is my custom button definition:

$action-button-base-color: #ded7bd; 
$button-action-background-color: adjust-color($action-button-base-color, $hue: 0deg, $saturation: 0%, $lightness: 8%);
$button-action-background-color-over: adjust-color($button-action-background-color, $hue: 0deg, $saturation: 0%, $lightness: 5%);
$button-action-background-color-pressed: adjust-color($action-button-base-color, $hue: 0deg, $saturation: 5%, $lightness: 2%);


@include extjs-button-ui (
/* UI + Scale */
'action-small',


$button-small-border-radius,
$button-small-border-width,


$button-default-border-color,
$button-default-border-color-over,
$button-default-border-color-focus,
$button-default-border-color-pressed,
$button-default-border-color-disabled,


$button-small-padding,
$button-small-text-padding,


$button-action-background-color,
$button-action-background-color-over,
$button-default-background-color-focus,
$button-action-background-color-pressed,
$button-default-background-color-disabled,


$button-default-background-gradient,
$button-default-background-gradient-over,
$button-default-background-gradient-focus,
$button-default-background-gradient-pressed,
$button-default-background-gradient-disabled,


$button-default-color,
$button-default-color-over,
$button-default-color-focus,
$button-default-color-pressed,
$button-default-color-disabled,


$button-small-font-size,
$button-small-font-size-over,
$button-small-font-size-focus,
$button-small-font-size-pressed,
$button-small-font-size-disabled,


$button-small-font-weight,
$button-small-font-weight-over,
$button-small-font-weight-focus,
$button-small-font-weight-pressed,
$button-small-font-weight-disabled,


$button-small-font-family,
$button-small-font-family-over,
$button-small-font-family-focus,
$button-small-font-family-pressed,
$button-small-font-family-disabled,


$button-small-icon-size
);

As I said, this produced a proper looking button in browsers that didn't need the border images, but I don't seem to have any generated images available for this customization.

Any help would be appreciated.

Jim

[mitchellsimoens]

Are you updated to latest versions of Cmd? I remember seeing bugs in regards to themes in 3.0.0 and 3.0.1

[jhoweaa]

Are you updated to latest versions of Cmd? I remember seeing bugs in regards to themes in 3.0.0 and 3.0.1

I'm using 3.0.2.288 which I believe is the latest.

[jpeckham]

Did you include it in the custom.js file before you built it with sencha cmd?

Like this:

$CustomManifest = {
    widgets: [
       {
            xtype: 'widget.button',
            ui: 'action-small'
        }
    ]
};

[jhoweaa]

I hadn't updated the custom.js file. In searching through the documentation I was able to find references to 'manifest' files in the Theming document and 'custom.js' in the Sencha Cmd documentation, but the connection between the two and how it relates to creating custom theme images is somewhat thin. It would be nice if there was a simple example showing how to create a new UI, how to make sure it gets built and how to make use of it.

After making the change I then found that my buttons weren't referring to the correct image. I had used 'action-small' as the name of the UI in my custom.js since that was the name I used in my UI definition. After some experimentation, I figured out that I probably just wanted to use the word 'action' instead of 'action-small'. In my button references, I used 'action' as the UI and 'small' as the scale. When I rebuilt everything, the images seemed to be generated and referenced correctly. The only thing I've noticed is that it seems that my button background image doesn't work in IE 8 (and below). Not sure why, but at this point I'm not overly concerned. At least I have the button mostly displaying correctly.

Thanks!

Jim

[jpeckham]

I agree; it wasn't all that obvious for me either. To clarify for anyone else running into this, based on my understanding:

Most modern browsers will render the buttons based on your .scss file after you compile it with compass. Older browsers (like IE 8 and below) don't support CSS3 (or support it incompletely), so they need to use images for things like background gradients. Sencha Cmd (and the former sencha slice tool) launch a headless webkit browser (PhantomJS) and slice up your elements to create the background graphics, etc. This is really quite awesome, as trying to do this manually would really be a pain. (Take a look at what a button really is in IE via the developer tools - it is a table). So, for Sencha Cmd to be able to slice up your elements to produce these graphics, it needs first to know what elements to slice up. It has defaults, which are in the manifest.js and shortcuts.js files. Anything you specified a custom UI for (NOT just buttons, but anything with a custom UI), you have to tell it about. You do that in the custom.js file. All of these files, along with your css file(s) should be referenced in the theme.html file, which is what gets launched by the headless webkit browser and sliced up to create your theme's graphics. You can always open the theme.html file in a modern browser (I'd recommend webkit, since that's what sencha cmd uses via PhantomJS) and look for your custom widgets to see if everything is rendering correctly.

[jhoweaa]

That's a very helpful write-up. Thanks!

[jpeckham]

I know this original thread was for Sencha Cmd 3.0. This has changed in Sencha Cmd 3.1.

There is a new manifest.js format. This is pretty well documented. What left me scratching my head for a bit is that the older 3.0 version required you to do this:

$CustomManifest = {
    widgets: [       {
     xtype: 'widget.button',
     ui: 'action-small'
   }    ]
 };

This has now changed in 3.1 and if you put the button size ("small") as part of the manifest, it will fail on generation.

Now it should be:

Ext.theme.addManifest(    {
        xtype: 'button',
        ui: 'action'
    }
);

The error you get is not that obvious, and it is only at the IE image slicing that you get a failure that isn't obvious:
[ERR] Widgets button-1186 and button-1188 conflict on image "images/btn/btn-orange-small-corners.gif" etc.
and
"Manifest contains conflicting slices (--tolerate not set)"

Hopefully this saves someone else from a bit of head scratching.

-James