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 

Put ниже элементов в файле вида:

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 для исх. Дайте мне знать, если он будет служить вашей цели или нет.