Results 1 to 7 of 7

Thread: Custom icon in TabPanel button

  1. #1

    Default Custom icon in TabPanel button

    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


    Code:
        <style>
            .info {
                background-image: url(/images/buttons/overview.png) no-repeat !important;
            }        
        </style>
        
        <script type="text/javascript">
            Ext.setup({
                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'
                        }]
                    });
                }
            });
        </script>

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    31

    Question Solved

    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!

    J.

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    18

    Default

    Thanks for this, saved me hours!!!

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    17

    Smile Thanks

    Thank you for help! It works!

  5. #5
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186

    Default Another way

    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.

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    2

    Default The proposed solution doesn't work for Sencha Touch 2.0

    Hello,

    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:

    Code:
    .gotoplace {
    -webkit-mask-box-image: url('../icons/BUTTON-NEW-PLACE.png');
    }
    and the js file uses the mentioned above CSS in the following manner:

    Code:
    Ext.define("BeenThereMobileApp.view.Main", {
          extend: 'Ext.TabPanel',
        requires: [
            'BeenThereMobileApp.view.UnitList'
        ],
    
    
    
    
        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>'
                    ].join("")
                }, 
                {
                    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!

    Alex,

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    31

    Default css changes

    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.

Similar Threads

  1. Custom icon directory
    By meediake in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 20 Mar 2010, 3:07 PM
  2. Ext JS 2.2.1 - Custom Tab Icon
    By mayura in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 23 Oct 2009, 4:21 AM
  3. RE: How to create a custom tooltip icon?
    By Arno.Nyhm in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 1 Oct 2009, 7:02 AM
  4. Set custom icon for panel toggle collapse button
    By foxnorth in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 13 Jun 2008, 6:08 PM
  5. Toggle button: change button icon when pressed?
    By dbadke in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 26 Mar 2007, 7:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •