Sencha Theming Customization of any xtype


If you’re developing Sencha Touch Applications you might be in need of using custom icons inside any container.
Sencha Touch provides a clever machinery for that. This “theming framework” consists of following tools:

  • css3: cascading stylesheets
  • sass: that is an extension of CSS3 to make CSS more compact
  • compass: CSS authoring framework written in Ruby

If you aren’t familiar with them, watch this video first and you will be able to use it: http://www.sencha.com/learn/theming-sencha-touch

Let’s have a look at the steps leading to the desired custom style:

Step 1:

Switch into the directory [your-project]/resources/sass and open the file app.scss

The content of that file should look like this:

@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;

// Your custom code goes here...

Step 2:

Append a custom method to the file ‘app.scss’:

@mixin pictos-iconmask-for-custom-list-item($name) {
  .x-list-item.#{$name} {
    background-image: theme_image('default', "pictos/" + $name + ".png");
    background-repeat: no-repeat;
  }
  .x-list-item.#{$name} .x-list-item-body {
    padding-left: 20%
  }
}

Step 3:

Append an invocation to the file app.scss:

@include pictos-iconmask-for-custom-list-item('check_black2');

Note: the parameter 'check_black2' is an icon delivered with default installation of Sencha. Accordingly, you could pass ‘home’, ‘action’ etc. as well! Open the directory [your-project]/touch/resources/themes/images/default/pictos to look up them.

Step 4:

Add more custom styles by using CSS vars (http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-css_var-S-list-active-color):

@import 'sencha-touch/default/all';

//custom style for list items
$list-active-color: rgba(173, 216, 230, .6);
$list-active-gradient: 'glossy';

Step 5:

Compile your stylesheet:

katarina@katarina-VirtualBox:/[your-project]/resources/sass$ compass compile
overwrite ../css/app.css 

Step 6:

custom your component:

Ext.define( 'TaskQueue.view.ListedTasks', {
    extend: 'Ext.List',
    requires: [
        'Ext.List'
    ],
    xtype: 'listedtasks',
    config: {
        itemCls: 'check_black2', //this is what you need to add for custom style
        itemTpl: '{desc}'
    },
    initialize: function() {
        this.callParent(arguments);
    }
});

Step 7:

Enjoy!

sencha-custom-list-item

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s