ExtJS 4 中字段旁边的标签

Question

我有一个文件 select 字段组件和一个标签，我希望它们彼此相邻显示（标签在右边）。它们都填充在一个函数中。不是字段的标签，只是我希望它在上传字段上警告文件大小的文本。这是代码：

this.fileUploadField = Ext.widget('filefield',
{
  fieldLabel: 'Select a file:',
  name:'file',
  width: 200,
  buttonText: 'Button' });

  items.push(
  this.fileUploadField,
 {
    xtype: 'label',
    style: 'color:red',
    text: 'I'm the label that wants to appear on the right of the file upload field',
    name:'fileSizeLimit'
 }
);

Answer 1

我会把它们放入一些 container and than set layout 作为 hbox。你可以使用例如

您可以使用任何可以设置布局的东西。您可以使用 flex 配置来正确定位您的字段。

因此代码可能如下所示：

xtype: 'fieldset',
title: 'My Fields',
layout: {
    type: 'hbox',
    align: 'stretch'
},
items: [{
    xtype: 'filefield',
    flex: 3,
    fieldLabel: 'Select file:'
}, {
    xtype: 'label',
    style: 'color:red',
    flex: 2,
    name: 'fileSizeLimit',
    text: 'I\'m the label that wants to appear on the right of the file upload field'
}]

看看这个 fiddle： https://fiddle.sencha.com/#fiddle/1ju5

ExtJS 4 中字段旁边的标签

Label next to a field in ExtJS 4

javascript

layout

extjs

extjs4