siva565
2 Nov 2012, 5:30 AM
I have a popup window in Extjs viewport layout and with in this popup I have a tab panel. When the tabpanel content too large popup window shows vertical scroll bar but the scroll bar not moving in Google chrome browser. It's working fine in Firefox.
39773
My sample code
var first_tab_form = Ext.create('Ext.form.Panel', {
autoHeight: true,
frame: false,
fileUpload: true,
fieldDefaults: {
labelWidth: 130,
labelSeparator: ' ',
labelAlign: 'right',
cls: 'textlineht ff_styles'
},
items: [{
fieldLabel: 'Field1',
xtype: 'textfield',
allowBlank: false,
anchor: '60%'
}, {
fieldLabel: 'Field2 ',
xtype: 'htmleditor',
anchor: '90%'
}, {
fieldLabel: 'Field3',
xtype: 'htmleditor',
anchor: '90%'
}] });
var MyTabs = Ext.createWidget('tabpanel', {
activeTab: 0,
width: 780,
height: 520,
//autoHeight: true,
//minHeight: 600,
plain: true,
defaults: {
autoScroll: true,
width: 780,
height: 520,
},
items: [{
title: 'My First Tab',
//layout: 'fit',
bodyPadding: 5,
items: first_tab_form
}, {
title: 'My second tab',
//layout: 'fit',
bodyPadding: 5,
items: second_tab_form
}]});
var MyWindow = Ext.create('Ext.window.Window', {
height: 560,
y: 10,
width: 800,
//autoScroll: true,
//closeAction: 'hide',
frame: false,
border: false,
modal: true,
bodyPadding: 10,
plain: true,
//layout: 'fit',
maximizable: true,
items: MyTabs
}).show()
;
39773
My sample code
var first_tab_form = Ext.create('Ext.form.Panel', {
autoHeight: true,
frame: false,
fileUpload: true,
fieldDefaults: {
labelWidth: 130,
labelSeparator: ' ',
labelAlign: 'right',
cls: 'textlineht ff_styles'
},
items: [{
fieldLabel: 'Field1',
xtype: 'textfield',
allowBlank: false,
anchor: '60%'
}, {
fieldLabel: 'Field2 ',
xtype: 'htmleditor',
anchor: '90%'
}, {
fieldLabel: 'Field3',
xtype: 'htmleditor',
anchor: '90%'
}] });
var MyTabs = Ext.createWidget('tabpanel', {
activeTab: 0,
width: 780,
height: 520,
//autoHeight: true,
//minHeight: 600,
plain: true,
defaults: {
autoScroll: true,
width: 780,
height: 520,
},
items: [{
title: 'My First Tab',
//layout: 'fit',
bodyPadding: 5,
items: first_tab_form
}, {
title: 'My second tab',
//layout: 'fit',
bodyPadding: 5,
items: second_tab_form
}]});
var MyWindow = Ext.create('Ext.window.Window', {
height: 560,
y: 10,
width: 800,
//autoScroll: true,
//closeAction: 'hide',
frame: false,
border: false,
modal: true,
bodyPadding: 10,
plain: true,
//layout: 'fit',
maximizable: true,
items: MyTabs
}).show()
;