Two questions of Icon example: use non-buildin icon image and load html file

[Buckeye]

Hello,

I am pretty new to Sencha and I am very interested in this hot area. I am trying to add icons at the bottom of the app with my own images. When any of the icon is clicked, it will lunch a corresponding html file. Some thing like following:

{ iconCls: 'MybookmarksImage', title: 'Bookmarks', html:'..\bookmark.html' },

Could anybody give me a heads up how to achieve these?

Thank you very much,

Buckeye

----Following is the sencha example code for icon----

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
fullscreen: true,
// type: 'light',
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',
html: 'Both toolbars and tabbars have built-in, ready to use icons. Styling custom icons is no hassle.<p><small>If you cant see all of the buttons below, try scrolling left/right.</small></p>',
items: [
{ iconCls: 'bookmarks', title: 'Bookmarks', html:'bookmark' },
{ iconCls: 'download', title: 'Download' },
{ iconCls: 'favorites', title: 'Favorites' },
{ iconCls: 'info', title: 'Info' },
{ iconCls: 'more', title: 'More' },
{ iconCls: 'search', title: 'Search' },
{ iconCls: 'settings', title: 'Settings' },
{ iconCls: 'team', title: 'Team' },
{ iconCls: 'time', title: 'Time' },
{ iconCls: 'user', title: 'User' }
],

[steve1964]

Hi, learn by example:
http://dev.sencha.com/deploy/touch/examples/tabs2/

[Buckeye]

Thank you for the reference of the example. But that is not what I asked. I already learned how to use build in icon and display stuff in "html" field. I just want to use my own icon not the build in one, how should I do it?

Second question is: how can I capture the click of the icon and do something besides displaying a piece of html, like execute a function or open a new html page?

Thanks!

[tomalex0]

1

.x-tab img.mylist {
  -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFgElEQVRoBe2bTahVVRTH3zWzKItMMzVfPZ9CFhVJH1bQLKImQk4iaVAUDoKggZMG0ccgalQNKogSIQiiSUg0KJoYGFkQhj0M8lnPCulDLcuytNfvd945t3Nv9557zj172+29u+D/9j37Y33stfc+a+2jjenp6RGp0WicRbEWjIL5YKaBH33QPMYcA3vAAWSU4oUOp9F/DFwJ/F1qHP260e807AeTqHA86ZTqoqEvgkNAIaHwNbweAPOVUwT6aOAW4JhQ8uVzEDwBlqW2jizm4Q2gR0IKynidhO/mImNTRR6k34lIOujIZ8A5YGQT+BZkCsYov4H/eDejabsC/BBZhyn4b3Sv3QAuBDHJmb2mQMDttCWzX9CnbtMFMFinwR5QlrHp9AIBS2hTj5h0JswX54W4f1zrnmwu67okD2f17JRREc9828/0V49GOq7fQp46UvnnAQ/Fllmd5PlxsBv8BeqSPDwfHgJlVpAGauhTYHvJMXQrJOW6lR4Ba+yZ9/CvPO/lYPnMhhDEe/Vj+Hj6l9mfGuzqmkCHzymDEDosgNHRjFl+5hW4gA75uqxfv2WyjCoMVoeivV6BVRJMacsZQL4JhTQu4znQ5dDggXZPAOWGHg4wiQPNYujhgXZPAOXmvIfNXfNxbd057SdEVYdQpC3mCE3Kh5aGYGYtS4m2+lG0yTT9IY9VwEin7CSqzwrkeykRYvXJYzkwU0oob/Al1DwKvp9pqv1XT10NzFR+KcHNCXLCHwbmx1XDUob8iwwpR8GarCVvsGnU+qzhFJdZrGvpxIsoFGLZlFEsM6hbXzO1ENuoG3/r/wRHNdj81/ukmOSSnigQ8B5tJv4x6UeYJ6nvan7sALFuDKfh/Wy3CzzrISf+ZeBDDHgn/TZYmdwV8+NasBUcBiEFmnh7g7GwyODUaM+Q54BjQuqgTS+BS5XTSIX55WEpldeDceCrpA7pMW8vPgU7keEM9yR0WEin68BVwFdJ3X2t3EmwCx2+o/zHYB8khPY6YGY6Fv91ImspixpOmp6uRejRwqPp4Vpc/0eDncU5RUODZ7u755yHm7F0ejpfjIcN9uue1I73lJ4CR9pPSuo6UqqDmdLKjh2qVxpMHUa+Xy8TSgxGkEI2Aj+NjAMzlZbjnOcqpMHGrjvBNvAuKEO30elecGOZziX6/EGfCex7lfItDD/mmHPBVhA6wsmiJWPYTb4Oi0Cf+8ERkI0LWZorPAnM+Uc2gC9BSAHtvPbCf1E3g2lzCe+LrMMX8L/FQ+smsBzEJPnfXCDASV9R0B6iaRlM1muwSzpxdQiuXXi4p42Tu9EYDbF1MDm5SINPFbnMu1GtuLsb0071zdcSjfvB02AP8DgPQffAxFNXD/ciJ9+D83nwZq/OJdv99LoObAG+cls+iP/E80fgEw6XIm84rhTxOnDv3gGKlnOelzcjHyD+w3xlv7/T97pp6iGQGNy+pN1HZbxRRYeqk9euUxVZ7X21Jb+Kg9z9tgsZ6OeQsznQhmbKDQ3OZmK2lkMPz1bPZnYNPZzNxGwtY3v4JBNXNfAIHVe38Gs3+DfCupYONT3tv7GskgUZFTU/XteU7XAnW3ua0VbzB5V+VHuB+NO4s6pXGNKR1lK7CPg5tBep2PngMXS4u1fnku1eVS0B2pZQ3mC94WXAf0FZ/K6Cl6WIokf7ko4ipART09FQq6qbOPmf0OApYFoWkxT2VYEA00HTuJjkVvVubeRyYB7sHlKxGNgG33mm2Z1Amwfb6yCGbHm6gnaAMZCkiHdS7gbeJYcW+g48k/8k1cnYrI4+o+D9CPI1VofeqqzkcymnoofFKnAf8KN43VeDW+U42A5eQ9BByp6EHt6Q3AU2AD/K131Fuk12gVfAPvSY/htzWlGoD6UCNgAAAABJRU5ErkJggg==');
}

       {
       xtype:'panel'
       iconCls: 'mylist'
      }

2.

tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center',
listeners:{
    change:function(tabbar,tab, card){
              //Here you will get change in tabs. Do stuff......
    }
}
}

Hope this will help

[Buckeye]

Thank you very much for the reply of my 2 questions.

For 1, how can I generate this .x-tab img.list with the url of my own image? Sorry that I need more instructions for this.
For 2, I tried the code, but it seems only catch the change of tab ( when load it), not the change of icon click. How to detect icon click/change/select and do something?

Thanks again.

[tomalex0]

1. Either you can specify the url in .x-tab img.list or convert image to base64 format and specify that

2. What you mean by change of icon, is it the change in tabselection itself?

[Buckeye]

1. I will try your suggestions. Thank you.
2. I have several icon items loaded at the bottom of tab panel. I want to do something when certain icon is clicked. For example code, I can use property "html" to display a text. My questions is: can I do more than display a html text like run a script etc? So I want to detect the click of the certain icon? The listeners from your precious example can only detect the tab panel loading,no response when certain icon is clicked. Probably I used a wrong way. Please advise.

Thank you very much for your help!

[tomalex0]

Run this code and check your console.

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'
                },
                listeners:{
                    change:function(tabbar,tab, card){
                        console.log(card.title);
                        switch(card.title){
                            case 'About':
                                    //Do Something
                                break;
                            case 'About':
                                    //Do Something
                                break;
                            case 'Favorites':
                                    //Do Something
                                break;
                            case 'Downloads':
                                    //Do Something
                                break;
                            case 'Settings':
                                    //Do Something
                                break;
                            case 'User':
                                    //Do Something
                                break;
                        }
                    }
                }
            },
            fullscreen: true,
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide',
                cover: true
            },
            
            defaults: {
                scroll: 'vertical'
            },
            items: [{
                title: 'About',
                html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                iconCls: 'info',
                cls: 'card1'
            }, {
                title: 'Favorites',
                html: '<h1>Favorites Card</h1>',
                iconCls: 'favorites',
                cls: 'card2',
                badgeText: '4'
            }, {
                title: 'Downloads',
                id: 'tab3',
                html: '<h1>Downloads Card</h1>',
                badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                cls: 'card3',
                iconCls: 'download'
            }, {
                title: 'Settings',
                html: '<h1>Settings Card</h1>',
                cls: 'card4',
                iconCls: 'settings'
            }, {
                title: 'User',
                html: '<h1>User Card</h1>',
                cls: 'card5',
                iconCls: 'user'
            }]
        });
    }
});

[Buckeye]

tomalex0, I modified my code based on the sample code you provided and it works!!! Thank you very much and appreciate your help!

I will try the icon image change next. Probably need your help later.

Thank you very much again for your great help!!!

[Buckeye]

tomalex0, I tried to load my own icon with a url and it works as you indicated in your example. But I found out all the icons are gray and white, even the color one I made displays only gray and white. Is there a mask on these icon? How can I display color icons?

Thank you!