Code:
Ext.onReady(function(){
Ext.override(Ext.Element, {
getWidth : function(contentWidth){
var me = this,
dom = me.dom,
w = dom.offsetWidth|| 0;
w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
if(w <= 0){
w = parseInt(dom.style.width, 10) || 0;
while(dom.parentNode){
if(dom.parentNode.style){
w += (parseInt(dom.parentNode.style.marginLeft, 10) || 0);
w += (parseInt(dom.parentNode.style.paddingLeft, 10) || 0);
}
dom = dom.parentNode;
}
console.log(w);
}
return w;
}
});
var tabs = new Ext.FormPanel({
labelWidth : 75
,border : false
,items: {
xtype : 'tabpanel'
,activeTab : 0
,deferredRender : false
//,layoutOnTabChange : true
,id : 'tp'
,anchor : '100% 100%'
,style : 'margin-bottom:10px;'
,defaults:{
autoScroll : true
,bodyStyle :'padding:10px;'
}
,items:[{
title : 'Personal Details',
layout : 'form',
id : 'tab1'
,items: [{
anchor : '-20'
,autoHeight : true
,title : 'Customer'
,checkboxName : 'checkAnimation'
,checkboxToggle : true
,xtype : 'fieldset'
,defaults: {
anchor : '-22'
,width : 230
,msgTarget : 'side'
},
defaultType: 'textfield',
items :[{
fieldLabel: 'First Name',
allowBlank: false,
name: 'first',
id: 'focus1'
},{
fieldLabel: 'Last Name',
allowBlank: false,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},{
title : 'Phone Numbers'
,layout : 'form'
,id : 'tab2'
,defaults : {
width : 230
,anchor : '-22'
,msgTarget : 'side'
}
,defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
allowBlank: false,
name: 'home',
value: '(888) 555-1212'
}, {
fieldLabel: 'Email',
allowBlank: false,
name: 'email',
vtype:'email'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax',
style:'margin-bottom:10px;'
}]
}]
}
});
var myWindow = new Ext.Window({
height : 400
,border : false
,layout : 'fit'
,title : 'a window'
,width : 400
,items : tabs
,buttons: [{
text: 'Step 1',
handler : function(){
Ext.getCmp('focus1').focus();
Ext.getCmp('tp').setActiveTab(1);
}
},{
text: 'Step 2',
handler : function(){
Ext.getCmp('tp').setActiveTab(0);
}
}]
});
myWindow.show();
});
try it out with and without the fix.