0

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

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

我有一个视图，我想像这样渲染：

所需的视图布局

其中“Seen:”文本是静态且右对齐的，右侧的文本是由 3 段动态文本和 2 段静态文本拼接而成的字符串。

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

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 容器，左边有一个间隔组件，右边有一个标签。必须有一个更简单的方法。

连接

我能够构建我想放在右边的字符串，但我宁愿有多个标签，我可以与我的模型一对一地映射。对我来说，必须编写代码来连接字符串并不像 MVC。

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

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

4

1 回答 1

1

右对齐：可以通过text-alignCSS 属性来完成。在下面的示例中，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}'
        ]
    }
]
于 2012-10-20T15:20:03.437 回答