Extjs Sencha：如何将标签与文本字段对齐？

不得不问这个问题似乎很可笑——但我们开始了。如何将标签与文本字段水平对齐

我需要：

Label Text
Label
TextArea

这是我的密码。我已经尝试了一切，包括一个labelField，但是文本没有出现在我的视图中

Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N 
    config: {
        xtype: 'Ext.form.Panel',
        cls: 'dialogview formview',
        centered: true,
        scrollable: 'vertical',
        modal: true,
        screenId: 'opbuyoffvoidview',
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch',
        },
        items: [
        {
        xtype: 'toolbar',
        docked: 'top',
        title: 'Void Buyoff',
        cls: 'grey-bold-34pt',
        ui: 'transparent',
        items: [{
            xtype: 'button',
            cls: 'grey-bold-40pt greyBtn',
            text: 'Cancel',
            idForAction: 'opbuyoff-void-cancel_btn',
        },  {
            xtype: 'spacer',
        },{
            xtype: 'button',
            cls: 'grey-bold-40pt greyBtn',
            text: 'Save',
            idForAction: 'opbuyoff-void-save_btn',
        }],
        },
        {
            xtype: 'panel',
              layout: {
                type: 'vbox',
                pack: 'start',
                align: 'stretch',
                padding: 5
            },
            items: [
            {
                xtype: 'label',
                cls: 'block',
                text: 'tesdfasrewaer'
            },
            {
                 fieldLabel: 'label',
                labelWidth: 300,
                xtype: 'textfield',
                value: 'blahhhhh',

            }, {
                // xtype: 'panel' implied by default
                xtype: 'textfield',
                value: 'blahhhhhhhhhhh',
                fieldLabel: 'text 2',
            },{
                xtype: 'textareafield',
                width: 460,
                height: 230,
                idForUpdate: 'buyoff_reason_void',
                //cls: 'priorityMedLabel',
            }],
        },
          ],
        listeners: {
        initialize: function(me, eOpts) {
            CAMSApp.util.I18N.resolveStaticUIBindings(me); 
        },
        show: function (me, eOpts) {
            // Publish the screen id event.
            log('[OpBuyoffVoid.show]');
            CAMSApp.app.fireEvent('setscreenfocus', this);
        },
    },
    }
});

---

到目前为止，我从您的问题中了解到，您需要如下结构：

Label Text
Label
TextArea

在视图文件中放置以下项目：

items: [{
                xtype: 'fieldset',
                title: 'Enter your name and bio',
                items: [{
                    xtype: 'textfield',
                    label: 'Name',
                    name: 'name'
                }, {
                    xtype: 'textfield', // This textfield is dummy.
                    label: 'Bio',       // You can simply put html here
                    labelWidth: '100%'  // And can put your css to mimic default sencha label
                }, {
                    xtype: 'textareafield',
                    name: 'bio'
                }]
            }]

---

这是参考资料。请告诉我它是否符合您的目的。

您是否尝试使用hbox布局？你能和我分享一把小提琴吗？这样我就可以帮你把标签/文本项目包装在一个

hbox

容器中。如果你对回答者投反对票并发表评论，我将不胜感激，希望其他软件用户能更好地理解。