HowTo:Customizing the Titlebar for the Layout Region.

[Srinivas B]

Hi All ,
In my project i have a requirement to change the skin for the TileBar for the Layout Region.I tried changing only css styles related to titlebar in ext-all.css. But the changed style is applying for all the regions' title bar. But my requirement is to set seperate title bar skin for each layout region.

I am strugling from past two days.... :(.Can any body who come across this requiremnt help me ...

Thanks in Advance,
Srinivas.

[badgerd]

Could you post your code? It may give us a little insite as to what we may be able to look at for you.

[Srinivas B]

Hi badgerd,
Thanks for the reply,

Here the js code which creates the layout is,



var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 230,
titlebar: true,
collapsible: true,
//closable:true,
minSize: 100,
animate:true,
modal: true,
maxSize: 400
//fitToFrame:true
},
center: {
autoScroll:true,
titlebar: false,
hideTabs:true
titlebar: true
}
});
layout.beginUpdate();
......................



I didn't changed any thing as part of ext-all.js file.. I changed only the ext-all.css classes.The changed classes are as below.


.x-layout-panel-hd{
background-image: url(../images/webpro-images/layout/top_curve.gif);
color: black;
/* border-bottom:0px solid #98c0f4; */

background-repeat:no-repeat;
position:relative;
}
.x-layout-panel-hd-tools{
position:absolute;
right:0;
top:0;
text-align:right;
padding-top:0px;
padding-right:0px;
width:60px;
}
.x-layout-tools-button{
z-index:6;
padding-top:7px;
cursor:pointer;
float:right;
}



.x-layout-tools-button-inner{
padding-right:0px;
padding-top:0px;
padding-left:0px;
height:22px;
width:19px;
line-height:1px;
font-size:1px;
background-repeat:no-repeat;
background-position:center;
}

.x-layout-collapse-west{
background-image:url(../images/webpro-images/layout/collapse.gif);
}

.x-dlg-collapse {
background-image:url(../images/webpro-images/layout/collapse.gif);
}


I got little idea on creating the sub class of SplitLayoutRegion .. but i dont know which part of the functions need to override in order to give custom defined css classes for only the "West" Region.

One more doubt is how to assign this subclass of SplitLayoutRegion to the BorderLayout?

Thanks

srinivas

[Srinivas B]

Hi again ,
In the previus code snippet small typo error ..

,
center: {
autoScroll:true,
titlebar: false,
hideTabs:true
titlebar: true
}

In this snippet there is only one titlebar: true .. there is no (titlebar:false).

[badgerd]

A quick way to modify the style is to change the css in the class name "x-layout-panel-hd-text".

eg:



.x-layout-panel-hd-text{
font:normal 12px tahoma, verdana, helvetica;
padding: 4px;
padding-left: 4px;
display:block;
}

[Srinivas B]

When i am changing this css style , the same style is applying for all the other title bars in all the regions got effected.Since my requirement is to give different skins for title bars which are there in different regions i am unable to do this...

Is there any thing we can do in js level?

one more challenge for me is to customize the fast switch button functionality to my specified icon button.

Any ideas will be really appreciated.

Thanks,
Srinivas

[Srinivas B]

I got one solution ..



var westRegion = layout.getRegion('west');
var titleDiv = Ext.DomHelper.overwrite(westRegion.titleEl, {tag:'div' }, true);
titleDiv.appendChild( Ext.get( 'left-panel-titlebar') );
westRegion .collapseBtn = Ext.get( 'collapse-btn-id' ) ;

westRegion .collapseBtn.on("click", westRegion .collapse, aRegion);
westRegion .collapseBtn.enableDisplayMode();



This code works perfectly fine..... like above we can give the region collapse functionality to any of the buttons in the page.

Thanks ..

Srinivas