Results 1 to 5 of 5

Thread: How to change Tabbar iconcls corresponding Tabbar item selected in sencha touch

  1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
      0  

    Default How to change Tabbar iconcls corresponding Tabbar item selected in sencha touch

    i have done application using sencha touch2. in tab-bar i want to show to user, once iselect the item from tab-bar then need to change normal image to selected image. Right now i am doing via sass styles.Normal images are coming fine,but when i select/activate item. it is not changing normal icon to selected-icon. i gone some articles i have applied it is not working for me. below i have given code. can any one tell me how to achieve this one.

    View page code:
    Code:
    config: {
    tabBarPosition: 'bottom',
    items: [{      
            iconCls: 'ApartmentIcon',
            autoDestroy:true,
            layout:{
                type:'vbox',
                pack:'center'
            },
            scrollable: true,       
            fullscreen:true,
                items: [
                         {
                          //Some items
                         }
                      ]
    }
    ]
    }
    Css code: i gone below four ways,but once i select image is not changing.
    Code:
    .ApartmentIcon{
      @include image-tabIcon('data:image/png;base64,NormalimageBase64code....=',70px,90px);
    }
    
    ApartmentIcon.x-button-pressing{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .ApartmentIcon.x-tab-active{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .ApartmentIcon.selected{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .x-tabbar-dark.x-docked-bottom .x-tab-active:first-child{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    Last edited by Rameshlamani; 5 Aug 2012 at 9:42 PM. Reason: Did the code changes.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    The iconCls needs to go on the items no the tab panel.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
      0  

    Default

    Can you explain clearly. so, how can i change tab-icon on tab-bar item pressing.

  4. #4
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
      0  

    Default How to change Tabbar iconcls corresponding Tabbar item selected in sencha touch

    Hi, Thank you for your reply. Below i have given my complete code. when i activate/select item from tab-bar. image is not changing normal to selected image. can any one tell me how to acieve this one.
    Here: is my main tab-bar view


    Code:
    Ext.define("ProjectName.view.MainTabbarView", {
        extend: 'Ext.tab.Panel',
        xtype: 'MainTabbarView',   
        config: {
            tabBarPosition: 'bottom', 
            items: [            
                {
                    xclass: 'ProjectName.view.View1',  
                },
                {
                    xclass: 'ProjectName.view.View2',                
                }            
              ]
        }
    });
    Here is my xclass: 'ProjectName.view.View1',

    Code:
    Ext.define("ProjectName.view.View1", {
        extend:'Ext.Panel',
        xtype:'ApartmentDetails',
        requires: [ 'Ext.TitleBar'],
        config: {
            iconCls: 'ApartmentIcon',                    
            autoDestroy:true,
            layout:{
                type:'vbox',
                pack:'center'
            },
            scrollable: true,       
            fullscreen:true,
                items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    cls: 'titleBar',
                    id: 'lblapartmentTitlebar'
                },
                {
                    xtype: 'image',
                    id: 'imgapatment',
                    cls: 'centerImage',
                    flex: 1
                } 
            ]
        }
    });
    Here is my "ProjectName.view.View2"
    Code:
    Ext.define("ProjectName.view.View2", {
        extend:'Ext.Panel',
        xtype:'SpecificationView',
        requires:[ 'Ext.TitleBar'],
        config:{        
            iconCls:'specificationIcon',
            autoDestroy:true,
            scrollable:true,
            xtype:'dataview',
            layout:{
                align:'center',
                pack:'center'
            },
            items:[
                {
                    docked:'top',
                    xtype: 'titlebar',
                    cls: 'titleBar',
                    title:'Specification'
                },
                {
                    cls:'ContainerWrapper',
                    xtype:'label',
                    id:'lblSpecificationContent'
                }
            ]
        }
    });
    Here is my SASS css
    Code:
    .ApartmentIcon{
      @include image-tabIcon('data:image/png;base64,NormalimageBase64code....=',70px,90px);
    }
    ApartmentIcon.x-button-pressing{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .ApartmentIcon.x-tab-active{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .ApartmentIcon.selected{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .ApartmentIcon.x-tab-pressed{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }
    .x-tabbar-dark.x-docked-bottom .x-tab-active:first-child{
      @include image-tabIcon('data:image/png;base64,SelectedimageBase64code....=',70px,90px);
    }

  5. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Inspect the DOM, look at what classes are on the tab.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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