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

[Rameshlamani]

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:

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.

.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);
}

[mitchellsimoens]

The iconCls needs to go on the items no the tab panel.

[Rameshlamani]

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

[Rameshlamani]

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

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

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"

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

.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);
}

[mitchellsimoens]

Inspect the DOM, look at what classes are on the tab.