PDA

View Full Version : Top Toolbar - How to add custom logo / graphics?



chearner
19 Aug 2011, 7:25 AM
I was hoping someone could tell me the best way to modify a toolbar, the top for example, with custom images or graphics. I want to center a logo image up top, rather than use the 'title' attribute. I can make a transparent .png file and center it using an html 'item' but it puts it in a button format, not what I'm looking for.

Thanks!

jjerome
19 Aug 2011, 8:50 AM
Please utilize the search function on this forum:

http://www.sencha.com/forum/showthread.php?142934-Problems-Centering-a-Logo-Image-on-Top-Toolbar-with-Buttons

chearner
19 Aug 2011, 9:48 AM
Thanks , using the search button never occurred to us. Posting links to premium support questions doesn't help everyone, and probably why they don't show up in a search. A more helpful solution to me and everyone else would be to go to the post you are privileged to, cut and paste (Ctrl-C in case you don't know that short cut) the relevant text here and then wish me luck on solving my problem.

jjerome
19 Aug 2011, 12:52 PM
Thanks , using the search button never occurred to us. Posting links to premium support questions doesn't help everyone, and probably why they don't show up in a search. A more helpful solution to me and everyone else would be to go to the post you are privileged to, cut and paste (Ctrl-C in case you don't know that short cut) the relevant text here and then wish me luck on solving my problem.

Woah woah slow down.. I didn't realize that topic was in the premium section..

Use the 'title' config and include an <img> tag with the source to the image. Since the title option supports html you can use that.




title: '<img style="margin-top: 5px;" src="app/images/toolbar_title.png" />',

chearner
19 Aug 2011, 1:02 PM
Lol. Sorry I had to be rough with you, but people who say 'Search' for it next time are going to get an ear full!

Back to the subject, it seems when I tried that before button items seems to be kicked down a line and hidden from view. I was trying to make a logo and back buttons, etc. to the left or right visible on the same toolbar. Maybe I need to

Thanks.

jjerome
19 Aug 2011, 1:06 PM
Use a table inside the title config.

Like this:


'<table>'+
'<tbody><tr>'+'
'<td><img src="resources/images/pictos/info.png" WIDTH="30" HEIGHT="30" /></td>'+
'<td valign="center">&nbspInquire Contact</td>'+
'</tbody>'+
'</table>'

allisterf
30 Aug 2011, 6:07 AM
Hi there.

I was following your thread which seemed to be the closest so far to what I've been looking for and wondered if you can help point me in the right direction.

I was trying to add a custom image to the toolbar and haven't been able to see how to do that as a background image...or anything else. I tried using the suggested html in the title config, but that also impacts the title of the tab bar icons and the image also becomes incorporated into the back button.

I assume that making custom artwork to go into a top tool bar is not uncommon as many would need it for their company logo etc. But how is it best done?

Thanks in advance for your help,
Allister

chearner
31 Aug 2011, 8:36 AM
this worked for me, a centered logo that allows buttons on either side.
hard to believe not more people haven't needed this.

title : '<div align="center"><table><tr><td><img src="logo.png"/></td></tr></table></div>',

allisterf
1 Sep 2011, 12:56 AM
Hi Chearner,

I had tried putting html into the title, and it does show the image in the title bar like - but it also changes the title reference for the iconCLs for that panel on the tab bar, putting that image there rather than the word that had been previously in the title config.

Is there any way to work around this?

Allister

chearner
2 Sep 2011, 11:26 AM
"title reference for the iconCLs for that panel on the tab bar"

Please clarify if you can what you are trying to do. Do you want text to show on top of a background image?

What is the iconCls property on?

allisterf
3 Sep 2011, 12:33 AM
As you can probably tell, it helps to know what your talking about and I've certainly got a long way to go!!

OK - firstly I realised I was adapting the wrong title config and it needed to be the title in the docked items as in:

var dates = new Ext.Panel({
title: 'Dates',
id:'qview',
iconCls: 'calendar',
styleHtmlContent: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'omred',
title : '<div align="center"><table><tr><td><img src="images/header.png"/></td></tr></table></div>'
}]
});

But I'm less sure how to do that for a nested list and its detail card as in:
var moreList = new Ext.NestedList({
fullscreen: true,
title: 'More',
iconCls: 'more',
displayField: 'text',
store: moreStore,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ['<h4 class="newsTitle">{text}</h4>','{info}']
});
detailCard.update(itemData);
return detailCard;
}
});

Would you be able to point me in the right direction?

Thanks
Allister

chearner
6 Sep 2011, 7:56 AM
I was able to to put a logo in a toolbar...on the title: property

var viewport = this.viewport = new Ext.Panel({...})

var toolbar = this.toolbar = new Ext.Toolbar({...})

Edit: I see you added the toolbar via a dockedItem property to the Panel. Not sure if that has anything to do with it.

SimonFlack
6 Sep 2011, 8:58 AM
Hey. Check the booking app in my signature. Some of the toolbars have embedded logos. Is that the kind of thing you are looking for?

If thats what you want send me a message and I can send you the SASS to style the toolbars with a gradient + logo/image.

chearner
6 Sep 2011, 9:24 AM
Yes, I got it to work using the title: property in the Toolbar, with HTML, to center an image. In my case a small, transparent .png file.

The goal, for example, was to replace the "Signature" title in your signaturePad app with a graphic rather than text. Css might be a good option rather than HTML, to make a toolbar style that could include branding/logo.

SimonFlack
6 Sep 2011, 10:07 AM
Here is how we are doing logo'ed toolbars..

SASS
.frisorapptitlebar{
font-family: georgia;
background-color: #555252;
@include background(theme_image($theme-name, "profile/bechtitle.png"),
linear-gradient(color_stops(#555252, #555252)));
background-repeat:no-repeat;
}



.frisorapptitlebar .x-toolbar-title{
text-align: right;
margin-right: 1.0em;
margin-top: 0.3em;
font-size: 1.0em;
letter-spacing:+1px;
color: #C0BFBB;
}

Javascript
dockedItems:[{
xtype: 'toolbar',
cls: 'frisorapptitlebar',
title: 'Bestilling'
}],

27892

Same approach is used to achieve textures in these toolbars.


27893

27894

allisterf
9 Sep 2011, 2:40 AM
Hi Simon.
Thanks for your code examples - they really helped.

However I'm a bit stuck to know how to put an image into the toolbar of a nestedList. Do you know how to do that?

Allister

SimonFlack
9 Sep 2011, 2:54 AM
Sorry. I have never tried.

avadhbsd
11 Oct 2011, 5:38 AM
i wasted hell lot of time figuring out how the fcuk one adds an image.. say logo to a toolbar object. i couldnt find any working solution, which is pity on sencha touch community.

here is what worked for me, may or may not work for you though :)

ListHeader = new Ext.Toolbar({
// title: "AOL Celebrity",
items: [


{
html: '<img src="resources/images/logo.png">',
xtype: 'box'
},


]

})

hope this will be helpful. i wish if some should have posted it before, would have saved a lot of my time ;)

steve1964
11 Oct 2011, 7:07 AM
Hi, you can use html in your toolbar title:

title: '<img src="images/logo.png" style="margin-left: 10px; vertical-align: middle" />Toolbar Title'

just one line...

ilovemydesigns
25 Nov 2011, 2:02 AM
Here is the simplest way to place logo in the place of title.


items: [ { html: '<div align="center"><img src="images/bvlogo.png"/></div>', xtype: 'box',cls:'logo'}, ]

For the class "logo" you can define css in scss file.

Thanks
saikiran
ilovemydesigns.com