Question

I have two questions regarding component layout using Sencha Touch 2:

• How can you right align text in a container?
• How can you concatenate different bits of dynamic data intermixed with static data into a component that needs to line wrap?

I have a view that I want to render like this:

Where the “Seen:” text is static and right aligned, and the text on the right is a concatenated string with 3 dynamic pieces of text and two pieces of static text.

I have something that works, but it doesn’t feel right.

xtype:'container',
    layout:{
    type:'hbox'
},
items:[
    {
        xtype:'container',
        flex:1,
        layout:{
            type:'hbox'
        },
        items:[
            {
                xtype:'spacer',
                layout:'fill'
            },
            {
                xtype:'label',
                layout:'fit',
                html:'Seen:'
            }
        ]
    },
    {
        xtype:'label',
        name:'contentLabel',
        flex:5,
        html:'[BUILD A STRING AND SET THE HTML HERE]'
    }
]

Right-aligning

So to right-align the text, I basically used an hbox container with a spacer component on the left and a label on the right. There’s got to be an easier way.

Concatenating

I am able to build the string that I want to place on the right, but I’d rather have multiple labels that I can map one-to-one with my model. It doesn’t feel like MVC for me to have to write code to concatenate strings.

I tried breaking apart the right side into an hbox, but there were problems with line wrapping. Each label wants to render itself individually, so if there were wrapping, it would happen within its own container.

Are there easier ways of doing what I am attempting?

Answer 1

Right aligning: it can be done with the text-align CSS property. In the example below I use the style property for simplicity, but using the cls property would be more flexible – it adds a CSS class to the component, so you can style it in the .sass file.

Concatenating: you can use the standard join() Javascript function. It concatenates all elements of an array into a string using the given separator. In my example dynamic1 and dynamic2 are variables.

So the result code:

xtype: 'container',
layout: {
    type: 'hbox'
},
items: [
    {
        xtype: 'label',
        flex: 1,
        html: 'Seen:',
        style: 'text-align:right'
    },
    {
        xtype: 'container',
        flex: 5,
        html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
    }
]

EDIT

You can also use the tpl property to define a template that renders data property. You can update it programatically calling container.setData()

xtype: 'container',
layout: {
    type: 'hbox'
},
items: [
    {
        xtype: 'label',
        flex: 1,
        html: 'Seen:',
        style: 'text-align:right'
    },
    {
        xtype: 'container',
        flex: 5,
        data: {
            name: 'Harry Potter',
            day: 'Saturday',
            date: 'October 21, 2011'
        },
        tpl: [
            '{name} on {day} {date}'
        ]
    }
]