Question

关于使用Sencha Touch 2的组件布局，我有两个问题：

如何正确对齐容器中的文字？
如何将与静态数据混合的动态数据的不同位连接到需要换行的组件中？

我有一个观点，我想这样渲染：

Desired view layout

＆＃34; Seen：＆＃34; text是静态的，右对齐，右边的文本是一个连接的字符串，包含3个动态文本和两个静态文本。

我有一些有用的东西，但感觉不对。

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]'
    }
]

从右对准

因此，为了正确对齐文本，我基本上使用了一个hbox容器，左边是一个spacer元素，右边是一个标签。必须有一个更简单的方法。

级联

我能够构建我想要放置在右侧的字符串，但我宁愿拥有多个标签，我可以与我的模型一对一地映射。我觉得MVC不必编写代码来连接字符串。

我尝试将右侧拆分为hbox，但是换行存在问题。每个标签都想单独渲染自己，所以如果有包装，它会在自己的容器内发生。

有没有更简单的方法来做我正在尝试的事情？

Answer 1

右对齐：可以使用text-align CSS属性完成。在下面的示例中，为了简单起见，我使用style属性，但使用cls属性会更灵活 - 它会向组件添加CSS类，因此您可以在.sass文件中设置样式。

连接：您可以使用标准join() Javascript功能。它使用给定的分隔符将数组的所有元素连接成一个字符串。在我的示例中，dynamic1和dynamic2是变量。

结果代码：

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('')
    }
]

修改

您还可以使用tpl属性来定义呈现data属性的模板。您可以以编程方式调用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}'
        ]
    }
]

使用Sencha Touch 2右对齐和连接字符串

1 个答案: