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

Question

问这个问题似乎很荒谬 - 但我们开始吧。如何水平对齐标签和文本字段？

我需要：

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);
        },
    },
    }
});

Answer 1

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

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

这里是 fiddle 供参考。让我知道它是否符合您的目的。

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

Sencha: How to align a label with a textfield?

layout

extjs

sencha-touch

sencha-touch-2