Results 1 to 3 of 3

Thread: Help formating a titlebar with alternating colors

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Vote Rating

    Default Answered: Help formating a titlebar with alternating colors

    Hello world,
    I am new to Sencha Touch development and have previously kept a distance from most web based development languages, tools and frameworks. I develop mobile apps using native tools but over the weekend I decided to try sencha touch, mostly due to how long it takes to make good looking Android UI's (I love Android by the way) . So with all the available example code and documentation available I have been able to learn enough to have almost completed my app in 2 days and I just need to add the aesthetic finishing touches, get the youtube video's to play and add advertising(I guess I still have a few days to go).

    What I would like to do is have the letters of a text string within a titlebar formatted with different colors. For example, I have a titlebar with the text, "HOME," within a container and I would like to format it so that the letter,"H," is orange and the remaining letters,"OME," are white. I don't usualy post on forums, but I have looked at examples, dug through documentation and banged my head against the wall for a few hours trying to get this to work. My last attempt is as follows;

                    xtype: 'titlebar',
                    title: {
                                   html:['<p style="color: #ff8012">H</p>OME']
                    docked: 'top'
    This results in no error being thrown in the console, but the title then appears as,"[object object]," instead of,"HOME." Can anybody help me please, I am new to both CSS and SASS and so if the solution is obvious I am very sorry.
    If anybody knows how to add a background image to the rows in a nested list I would much appreciate it . I can change the color, but I just can't figure out how to add an image from my resource/image directory.
    Thank you.

  2. You have your title: { ... } where adding the { } tells Sencha's API to create an object out of it. Try this out instead:
    items: [{
    	xtype: 'titlebar',
    	title: '<p style="color: #ff8012">H</p>OME', //did you mean to have H</p>OME? Not sure..
    	docked: 'top'
    You should just be able to add css styles right into the text without having to create an object out of it.
    If you take a look at this guide with the theming, or inspect the DOM elements in Chrome you can play around with the css that way and see instant results without rebuilding your code.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts