ExtJS 4.2.0：文本字段的垂直对齐答案

【问题标题】：ExtJS 4.2.0: Vertical alignment for textfieldExtJS 4.2.0：文本字段的垂直对齐
【发布时间】：2013-05-22 08:26:40
【问题描述】：

我无法让我在 ExtJS 中创建的文本字段与底部垂直对齐。

问题是，无论我尝试什么 - 它都保持垂直对齐到文本字段内的中心（文本字段本身被拉伸）。这有点难以解释，所以我创建了一个 JSFiddle 来演示我的问题：

http://jsfiddle.net/w3gfy/

CSS 代码：

.exx-valign-bottom { vertical-align: bottom; }

ExtJS 代码：

items: [
    {
        xtype: 'textfield',
        flex: 1,
        itemId: 'teQuantityField',
        fieldCls: 'x-form-field exx-valign-bottom',
        fieldStyle: 'vertical-align:bottom;',
        readOnlyCls: 'x-form-readonly exx-valign-bottom',
        cls: 'exx-valign-bottom',
        labelAlign: 'top',
        labelSeparator: ' ',
        emptyCls: 'x-form-empty-field exx-valign-bottom',
        emptyText: 'Align me'
     }
]

如您所见，我已经尝试将它放置在任何地方，但没有任何运气。有谁知道如何正确地做到这一点？

编辑：

我尝试添加此容器（请参阅 JSFiddle）。这是正确的方法吗？还是有别的办法？

http://jsfiddle.net/w3gfy/2/

【问题讨论】：

不确定是否可以，因为“可打字”区域只是中心部分，因此任何类型的对齐都无济于事。你会看到你是否使用::-webkit-input-placeholder {} 设置它并设置padding-top 它已经开始消失了。
我之前确实尝试过使用flex: 1 添加另一个字段，然后onFocus 将焦点设置到底部的字段。但根据我的经验，这是一个不好的解决方法，因为它似乎总是会在未来引起问题。这是解决这个问题的唯一方法还是我没有看到的另一种方法？

标签： css extjs extjs4 textfield

【解决方案1】：

不确定你想要什么，但我使用复杂的对齐方式

style:{marginLeft:'__px',marginRight:'__px',marginTop:'__px',marginBottom:'__px'}//使用你想要的marginProperty并使用“__”中的数值

【讨论】：

【解决方案2】：

我通过使用网格而不是表单解决了这个问题。

【讨论】：