View Full Version : Custom icon in TabPanel button

19 Jul 2010, 8:29 AM
I have this simple Tabpanel with a bottom tabBar. I would really really like to set my own icon and have tried as you can see - but failed... It doesn't even try to load the image!

Any input on how to do this would be very welcome

- Thomas

.info {
background-image: url(/images/buttons/overview.png) no-repeat !important;

<script type="text/javascript">
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
fullscreen: true,
items: [{
title: 'Test',
html: 'lorem lipsum...',
iconCls: 'overview'

3 Aug 2010, 2:38 PM
I've been sitting on this for more than a day now, but finally have the solution:

create a custom css file: custom.css (load this file in your index.html, after the ext-touch.css)
create a class for your icon with:
.mycustomclass {
-webkit-mask-box-image: url('myicon.png');

now instead of using the ready icons with iconCls, you type your custom css class in your javascript file:
items: [{
title: 'My page',
html: '<h1>Page</h1>',
iconCls: 'mycustomclass',
cls: 'card1'

worked for me!


16 May 2011, 7:42 AM
Thanks for this, saved me hours!!!

5 Jul 2011, 11:47 PM
Thank you for help! It works!

6 Jul 2011, 1:49 AM
you can also rebuild all the css with a change using their SASS build, but it's easier, simpler, and ultimately preferable to just add a new class. That's what I ended up doing too.

1 Aug 2012, 12:01 PM

I'm using Sencha touch 2.0 and trying to customize the icons of the TabPanel.
I've created a new CSS file which contains the following declaration:

.gotoplace {
-webkit-mask-box-image: url('../icons/BUTTON-NEW-PLACE.png');

and the js file uses the mentioned above CSS in the following manner:

Ext.define("BeenThereMobileApp.view.Main", {
extend: 'Ext.TabPanel',
requires: [

config: {
fullscreen: true,
tabBarPosition: 'bottom',

items: [
title: 'Home',
iconCls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0pr1)</h2>'
xtype: 'unitslist',
title: 'Units',
iconCls: 'gotoplace',


It seems that the selected image is loaded and presented however, it is being masked by some blue panel or BG image that presents only the outline of my icon.

Please advice!


1 Aug 2012, 5:17 PM
sorry, I haven't been using Sencha Touch for a while. I guess a few things may have changed in the css file for 2.0. It's probably something similar, however you need to find the right reference in the original css file and see what changed. You should be able to figure it out using the above examples. Sorry for not being able to help you out more.