1. #1
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

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

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


    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' }
    ],

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    303
    Vote Rating
    3
    steve1964 is on a distinguished road

      0  

  3. #3
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    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!

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    1

    Code:
    .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==');
    }
    Code:
           {
           xtype:'panel'
           iconCls: 'mylist'
          }

    2.
    Code:
    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

  5. #5
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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?

  7. #7
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    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!

  8. #8
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Run this code and check your console.
    Code:
    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'
                }]
            });
        }
    });

  9. #9
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    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!!!

  10. #10
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    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!

Similar Threads

  1. Search box clear icon behavior questions
    By adana325 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Jan 2011, 11:30 AM
  2. Substitute icon button with an image/icon
    By blay in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 26 Oct 2010, 2:37 AM
  3. New tab with icon image?
    By Kadifo in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Aug 2010, 4:46 AM
  4. Replies: 2
    Last Post: 5 Nov 2008, 1:16 AM
  5. Drag n drop image/icon on image and save positions to database
    By dodsatya in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 18 Dec 2007, 12:28 PM

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi