Extjs 4.2 - gradient background for menus using sencha cmd

Question

I would like to create a gradient background color using sencha cmd

here is what I have tried :

.#{$prefix}-menu-body{
@include background-image(linear-gradient(#47607E, #35475B));
 }

I have placed it under

sass\src\menu\Menu.scss

and run a package build.

I do not see any change in the background of my menus.

I would also like to know if I can use the CSS Variables to do that?

gloryBlade · Accepted Answer · 2013-09-30T09:17:36.500

menu is a panel ui . Ext.panel.Panel view source

extjs-panel-ui( $ui-label, [$ui-border-color], [$ui-border-radius], [$ui-border-width], [$ui-padding], [$ui-header-color], [$ui-header-font-family], [$ui-header-font-size], [$ui-header-font-weight], [$ui-header-line-height], [$ui-header-border-color], [$ui-header-border-width], [$ui-header-border-style], [$ui-header-background-color], [$ui-header-background-gradient], [$ui-header-inner-border-color], [$ui-header-inner-border-width], [$ui-header-text-padding], [$ui-header-text-transform], [$ui-header-padding], [$ui-header-icon-width], [$ui-header-icon-height], [$ui-header-icon-spacing], [$ui-header-icon-background-position], [$ui-header-glyph-color], [$ui-header-glyph-opacity], [$ui-tool-spacing], [$ui-tool-background-image], [$ui-body-color], [$ui-body-border-color], [$ui-body-border-width], [$ui-body-border-style], [$ui-body-background-color], [$ui-body-font-size], [$ui-body-font-weight], [$ui-background-stretch-top], [$ui-background-stretch-bottom], [$ui-background-stretch-right], [$ui-background-stretch-left], [$ui-include-border-management-rules], [$ui-wrap-border-color], [$ui-wrap-border-width] )

Creates a visual theme for a Panel put these in your menu.scss

@include extjs-panel-ui(
    $ui-label: 'your-ui-label-when-used-in 'ui' property',
    $ui-body-background-gradient: color-stops(#F950AD, #E4007f),
    $ui-border-color:#E4007f,
    $ui-body-background-color:#E4007f,
    $ui-body-border-width:0px,
    $ui-border-radius:5px,
    $ui-body-font-size:1.6em
);

in ext-theme-neutral /sass/panel/panel.scss add

  $ui-body-background-gradient: $panel-body-background-gradient,

// $panel-body-background-gradient is in your theme, var/panel/panel.scss //$ui-body-background-gradient is the var you are going to use. edit panel-body scss

  // body
    .#{$prefix}panel-body-#{$ui-label} {
        @if $ui-body-background-color != null { background: $ui-body-background-color; }
        @if $ui-body-border-color != null {     border-color: $ui-body-border-color; }
        @if $ui-body-color != null {            color: $ui-body-color; }
        @if $ui-body-font-size != null {        font-size: $ui-body-font-size; }
        @if $ui-body-font-weight != null {      font-size: $ui-body-font-weight; }
        @if $ui-body-border-width != null {
            border-width: $ui-body-border-width;
            @if $ui-body-border-style != null { border-style: $ui-body-border-style; }
        }
        //$ui-body-background-gradient: $panel-body-background-gradient,
        ////$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ add it !!!
        @if $ui-body-background-gradient !=null {
         @include background-gradient(
                     $ui-body-background-color,
                    $ui-body-background-gradient,
                    top
                );
        }
    }

I don't want to add the ui filed to every menu I create I want all my menus to get this styling. — AMember, Sep 26 '13 at 08:46
your menus your create just used [code]Ext.create('Ext.menu.Menu', { width: 100, margin: '0 0 10 0', floating: false, // usually you want this set to True (default) renderTo: Ext.getBody(), // usually rendered by it's containing component items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] });[/code] — gloryBlade, Sep 30 '13 at 08:30
I have used your answer to create a ui for my menus. Just know that $ui-body-background-gradient does not exists. thanks for your help. — AMember, Sep 30 '13 at 08:32
That's the gradient i added ,i forget to remove it.sorry. and you should add ui:'your ui name', in your menus config. — gloryBlade, Sep 30 '13 at 08:36

Extjs 4.2 - gradient background for menus using sencha cmd

1 Answers1