View Full Version : How to create a custom ui mixin?

30 Mar 2012, 10:03 AM

I know that you can easily create a ui for button, panel, window, toolbar because they have the "-ui" mixin. But what if I want to create a custom ui mixin for a menu for example?

I see that the menu element (xtype=menu) contains a UI config, so in theory, I should be able to assign a ui value. Does anyone have ever done that?...

I tried to copy the button logic. When I look at the widgets\_button.scss the mixin is declare this way:
@mixin extjs-button-ui(
) {...}

the UI is referenced this way inside the mixin

.#{$prefix}btn-#{$ui} {...}
how would I know how the menu element ui need to be called?... i tried this without success

@mixin sms-menu-ui (
$background-color: #ff0000
) {

.#{$prefix}menu-#{$ui}-body {
background: $background-color;

@include sms-menu-ui(
$background-color: blue

I need a little starter because what I tried didn't work and i can't find anybody that did that so far. Is there suppose to be more ui mixin for the future? is it possible top create ui for menu element? is there a guide on how to build them?


30 Mar 2012, 10:26 AM
Are you doing the @include within a class?

.something {
@include blah($arg1, $arg2)

30 Mar 2012, 11:16 AM
no i was not, so i tried this

@mixin sms-menu-ui (
$background-color: red
) {

.#{$prefix}menu-body {
background: $background-color;

.sms-test {
@include sms-menu-ui(
$background-color: blue

and then assign the ui like that in the config of the element

ui: 'sms-test'

but it didn't work either... do you think you can provide a simple example of a ui mixin on a menu or any element that dont have a default 'ui' mixin... I'm sure it would benefit the community.

thanks a lot!

10 Sep 2013, 5:36 AM
Good morning, i need create a mixin to, but i don't know how do it.
Somebody can speak something about this?

10 Sep 2013, 7:18 AM
here's an simple example of a mixin I created:

@mixin sms-label-ui(

.x-component-#{$ui-label} {
color: $ui-color;
font-family: $ui-font-family;
font-size: $ui-font-size;
font-weight: $ui-font-weight;

And here's how you use it:

@include sms-label-ui(
$ui-font-size: 40px,
$ui-font-family: 'Tahoma',
$ui-font-weight: bold,
$ui-color: #ff0000

Then in Architect, all you need to do is set the UI config of your label to 'sms-label-h1'.