Sencha: How to align a label with a textfield?

Question

It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?

I need:

Label Text
Label
TextArea

Here is my code. I've tried everything, including a labelField but the text does not appear in my view.

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

So far I understood from your question that you need structure like below:

Label Text
Label
TextArea

Put below items in your view file:

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

Here is the fiddle for ref. Let me know if it serves your purpose or not.