hideHeaders property is not working in border layout | May be a defect || Ext Js 4.0

[abhinavchugh]

Version Ext js 4.0
Issue: hideHeaders property of Ext.panel.Panel is not working properly in border layout. This is the code i am using


Ext.require('*');
Ext.onReady(function(){

var panelHeaderlesscenter=Ext.create('Ext.panel.Panel',{
//title:'maincon',
hideHeaders: true,
collapsible: false,
region:'center',
margins: '5 0 0 0'

});
var panelHeaderlesssouth=Ext.create('Ext.panel.Panel',{
//title:'south',
hideHeaders: true,
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
collapsible: true,
split: true,
collapsed:false
//floatable:true

});
var panelHeaderlessnorth= Ext.create('Ext.panel.Panel',{
//title: 'north',
hideHeaders: true,
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
collapsible: true,
split: true,
collapsed:false
});

var panel1= Ext.create('Ext.panel.Panel',{
//title : 'main Panel',
hideHeaders: true,
renderTo:Ext.getBody(),
height:800,
width:1600,
layout:'border',
defaults: {
split: true,
bodyStyle: 'padding:15px'
},
items: [panelHeaderlessnorth,panelHeaderlesssouth,panelHeaderlesscenter],

margins: '5 0 0 0'


} );
})


I am adding the panelHeaderlesscenter,panelHeaderlessnorth,panelHeaderlesssouth in panel1 of border layout. I am giving the
hideHeaders:true

in panelHeaderlesscenter,panelHeaderlessnorth,panelHeaderlesssouth .On running this code I found that the panel in center has no header but panel in north and south still have header.

On further invesitgation, i found that "collapsible" feature has some relation with "hideheaders "property, when I changed the collapsible feature of panelHeaderlessnorth,panelHeaderlesssouth to false,header was removed from panelHeaderlessnorth,panelHeaderlesssouth panel. Is it a defect? i want the collapsibe feature in headerless panels.How can i achieve that?

[skirtle]

Panels don't have a setting called hideHeaders, that's for hiding the grid column headers.

Do you mean preventHeader perhaps?

[abhinavchugh]

Hi skirtle,

I am mentioning about hideHeaders property and its works only when collapsible feature is false for panel. I tried preventHeader property, it dint work for me
:(

[skirtle]

I don't think hideHeaders is having any effect at all. I suspect you'll see exactly the same result whether you set it to true, false or remove it completely.

Not sure what you're trying to achieve. You can still collapse a region by calling collapse even with collapsible set to false. All that config really does is show the collapse button and it can't do that without a header.

[abhinavchugh]

skirtle, you are right . I simply removed the title and header was gone. there is no significance of hideHeaders property.

This conclude that by simply removing the title, we can remove the headers from panel. However in this case

var panelHeaderlesscenter=Ext.create('Ext.panel.Panel',{
//title:'maincon',

collapsible: false,
region:'center',
margins: '5 0 0 0'

});
var panelHeaderlesssouth=Ext.create('Ext.panel.Panel',{
//title:'south',

region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
collapsible: true,
split: true,
collapsed:false
//floatable:true

});
var panelHeaderlessnorth= Ext.create('Ext.panel.Panel',{
//title: 'north',

region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
collapsible: true,
split: true,
collapsed:false
});

var panel1= Ext.create('Ext.panel.Panel',{
//title : 'main Panel',
//hideders: false,Hea
renderTo:Ext.getBody(),
height:600,
width:800,
layout:'border',
defaults: {
split: true,
bodyStyle: 'padding:15px'
},
items: [panelHeaderlessnorth,panelHeaderlesssouth,panelHeaderlesscenter],
//
margins: '5 0 0 0'


} );




I am not giving any title in north,center and south panel, however i am still getting the headers in north and south panel but not in center panel, The only difference is north and south panel are collapsible.Please see the snapshot. i want to remove the headers from north and south panel with the collapsible feature.37659

[abhinavchugh]

its done, preventHeader was the key(this time it worked:D), Thanks skirtle for your good support:)

[mberrie]

Note: preventHeader is deprecated as of 4.1.0. With the latest Ext version use 'header: false' instead.

abhinavchugh, please mark the question as answered. I think that Skirtle's first answer basically said it all.