PDA

View Full Version : Extjs4 tabpanel autoHeight not working



siva565
19 Feb 2012, 11:41 PM
Hi,
In Extjs4 Tabpanel autoHeight:true not working.This was pretty easy to do in 3.x, simply by setting the "autoHeight" property of the TabPanel and the same for its children items via the "defaults" config. However it I have yet to seen a way to accomplish this in 4.x. The tabs do size to fit the initial height of their contents, however if the height of that content changes for any reason after init, the tab content is hidden/scrolled.

My tabpanel code is like this


tabs = Ext.createWidget('tabpanel', {
renderTo: 'center_div',
cls: "auto-width-tab-strip",
activeTab: 0,
plain: true,
// autoHeight: true,
defaults: {
autoHeight: true,
style: 'min-height:620px; padding:10px;'
},
items: [{
title: 'Dashboard',
loader: {
url: BASE_URL + 'courses/courses1/cc_dashboard/' + course_id,
scripts: true,
loadMask: true,
params:{id: 'default'}
},
listeners: {
activate: function (tab) {
tab.loader.load();
}
}
}, {
title: 'Chapters',
loader: {
url: BASE_URL + 'courses/courses1/cc_course_material',
scripts: true,
loadMask: true,
params:{id: 'default'}
},
listeners: {
activate: function (tab) {
tab.loader.load();
}
}
}]
});


Any ideas?

friend
20 Feb 2012, 4:56 AM
autoHeight is no longer supported in ExtJs v4.x. Instead, you should rely on the layout system to get the desired effect.

The most common solution to the problem you're having is to use a Viewport (with 'border' layout) and add your Tab Panel as the 'center' region.

siva565
24 Feb 2012, 7:37 AM
Thanks for your replay Friend.
But if i go through viewport layout page scrolling makes my layout little bit ugly. can you please suggest me how to customize scrolling of viewport like this.32112

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.menu.ColorPicker (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.menu.ColorPicker)