底部的 Extjs 文本字段标签答案

【问题标题】：Extjs text field label at bottom底部的 Extjs 文本字段标签
【发布时间】：2015-01-26 05:11:24
【问题描述】：

是否可以将标签放在文本字段的底部？我需要让 UI 看起来像 PDF/打印表单，其中大部分字段标签都位于输入字段下方。

CSS 样式/类方法就足够了。我只是想尽快解决这个问题。

提前致谢。

【问题讨论】：

【解决方案1】：

将自定义 cls 添加到您的文本字段，如下所示：

    Ext.create('Ext.Panel',{
        renderTo: Ext.getBody(),
        width: 300,
        height: 500,
        items: [{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            cls: 'pdfField',
            labelSeparator: ''
        }]
    });

然后创建pdfField类：

对于 ExtJS (5) =>

div.pdfField .x-form-item-label {
    display: table-footer-group;
    text-align: center;
}

对于 ExtJS (4) =>

.pdfField td {
    display: table-caption;
}

.pdfField tr>td:first-child {
    display: table-footer-group;
    text-align: center;
}

这是一个适用于两个版本的小提琴：https://fiddle.sencha.com/#fiddle/h35

并不是说 ExtJS 5 看起来更好，那是因为在 ExtJS 5 中使用 div 来显示文本字段内容，而 ExtJS 4 使用表格单元格。

【讨论】：

这适用于 5.0。你有适用于 4.2.x 的代码吗？感谢回复