Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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