Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:

Theming Containers and Lists

Page of 168
Adding a background image to containers

Applying a background image to a container

As previously discussed in this unit, you can change the background color of your containers by setting the Sass variable $page-bg-color.

Applying a global background image to your application can also be accomplished by overriding the .x-scroll-container class at the bottom of your application's scss file:

 background: url('../images/background.png');
 background-size: cover;

Theming the List Component itemDisclosure icon

You can theme the itemDisclosure button in a List component by completing the following steps:

  1. Add a cls property to your Ext.List configuration that specifies a unique identifier:

    Ext.define('MyApp.view.MyList', {
     extend: 'Ext.dataView.List',
     onItemDisclosure: true,
     cls: 'mylist'

  2. Add a css class selector to your scss file that refers to the list's x-list-disclosure class and overrides its webkit-mask-image setting with a base-64 encoded image as illustrated by the following code snippet:

    .mylist .x-list-disclosure {
     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgo...') !important;

Configuring List Selection Colors

You can modify the selection color of a list item by configuring the following Sass variables:

Sass VariableDescription
$list-pressed-color The color of a list item when it is clicked and the mouse button is in a "pressed" state.
$list-active-color The color of the currently selected list item.
Page of 168
comments powered by Disqus