1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default Unanswered: 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
    38,583
    Vote Rating
    1136
    Answers
    3709
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    The iconCls needs to go on the items no the tab panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      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
    Rameshlamani is on a distinguished road

      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
    38,583
    Vote Rating
    1136
    Answers
    3709
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Inspect the DOM, look at what classes are on the tab.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread