css - ExtJS 4.2.0: テキストフィールドの垂直方向の配置

Question

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/

Answer 1

フォームの代わりにグリッドを使用して、この問題を解決しました。