Sencha Touch - 在面板中水平放置而不是垂直放置的标签

Posted 2023-02-26

【中文标题】Sencha Touch - 在面板中水平放置而不是垂直放置的标签

【英文标题】：Sencha Touch - Labels horizontally placed instead of vertically in a panel

【发布时间】：2011-12-05 15:31:47

【问题描述】：

我想在垂直布局中放置两个标签、一个文本字段和一个按钮。 但是这两个标签是水平放置的，而文本字段和按钮是垂直放置的。

标签1 |标签 2 |文本字段/按钮

我尝试了各种布局选项，但没有帮助。我的布局是否存在根本性错误？ 有什么建议吗？

面板代码：

Ext.define('MyApp.view.Demoview', 
extend: 'Ext.Panel',
xtype: 'demoview',
fullscreen : false,
config: 
    items : [ 
        docked : 'top',
        xtype : 'toolbar',
        title : 'A title'
    , 
        xtype : 'panel',
        layout : 
            type : 'vbox',
            pack : 'center',
            align : 'center'
        ,
        defaults : 
            margin : 5
        ,
        items : [ 
            xtype : 'label',
            stylehtmlContent: true,
            height:'100px',
            html : 'label 1'
        , 
            xtype: 'label',
            styleHtmlContent: true,
            height: '100px',
            html: 'label 2'
        , 
            xtype : 'textfield',
            label: 'Name',
            required: true
        , 
            xtype : 'button',
            itemId : 'demoButton',
            text : 'Button',
            ui : 'round'
        ]
     ]
);

它们嵌套在具有卡片布局的容器中：

Ext.define('MyApp.view.Main', 
extend : 'Ext.Container',
requires : [ 'MyApp.view.Someview', 'MyApp.view.Demoview'],
config : 
    fullscreen : false,
    layout : 'card',
    activeItem : 0,
    items : [ 
        layout : 'fit',
        xtype : 'somview'
    
        layout : 'fit',
        xtype : 'demoview'
     
]
);

【参考方案1】：

你可以使用

labelAlign:'top'

在文本字段上方垂直对齐标签的属性。

【讨论】：

您好，谢谢您的回复。文本字段及其标签完美运行。问题出在 xtype 上：'label'！它们水平显示为大的水平框，而不是垂直显示在文本字段和按钮上方。

【参考方案2】：

更新到 Sencha Touch 2 Developer Preview 3 解决了我的问题。