PDA

View Full Version : How make changes to Title bar in border layout?



simonr26
14 Dec 2011, 1:38 AM
Hello,

I have defined/created a viewport having a border layout with north region as below:
Please can you inform me if/how I can centre the title and also add an icon ( i have a
16x16 gif) to the title bar?


Ext.define('APP.view.Viewport', {
extend: 'Ext.container.Viewport',
layout : 'border',


initComponent: function() {


this.items = [
{
title : 'North Panel',
region : 'north',
height : 100,
maxHeight : 150,
collapsible : true,
resizeable: true
},...






kind regards,
Simon

punith.mailme
14 Dec 2011, 1:47 AM
simon i am very new to extjs.
but u can use tbar : [ ].. and define items in it

tvanzoelen
14 Dec 2011, 2:04 AM
there is a iconCls property .. see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel

for centering the title. It is just html, even '<center>' + title + '</center>' is possible.

nfuids
14 Dec 2011, 6:44 AM
You will also need a component in the 'center' region.. I think this is a requirement of Viewport.

simonr26
15 Dec 2011, 2:05 AM
Hello,
Thank you for your replies.


I have modified the northern region as below.
This successfully centred the title in the title bar. However the icon is at
the far left of the title bar. Is there a way of displaying the icon directly
(immediately) to the left of the title whilst keeping the title centred in the
title bar?


{
title : '<center>North Panel</center>',
iconCls: 'icon-logo',
region : 'north',
height : 100,
maxHeight : 150,
collapsible : true,
resizeable: true
}


stylesheets/main.css:
.icon-logo { background-image: url(/public/images/icon-logo.gif) !important; }


Also, would you know how do I display icons having dimensions not equal to 16x16.
I have an icon which has a width > 16 pixels.


kind regards,
Simon

tvanzoelen
15 Dec 2011, 2:12 AM
Why not dispay the icon in the title as well with a <img> tag? Set the size within the img tag.

Or decorate your title with a div and set your css class on that div. That would be more maintainable if you want to modify your icons in css.