Help formating a titlebar with alternating colors

[thecodegenius]

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;

items:
        [
            {

                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.
P.S
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.

[jerome76]

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.

[thecodegenius]

Wow, such a quick response. Given the fact that my question was not as concise as it should have been you were still able to provide me with the information I needed to solve the issue. The following is what I used to get the desired effect.

items: [
                     {     
                          xtype: 'titlebar',     
                          title: '<font color="#ff8012">H</font>OME',    
                          docked: 'top'
                       }
               ]

You can tell that I have no clue what I'm doing when it comes to anything web related but it's only been a few days now and I will get to grips with html, css, etc.

I thank you for the solution as well as for the tips you provided, you have also given me the confidence to engage in the forums. It's 3:27am and I can now go to sleep
Thank you very much