ExtJS5 - FieldLabelをResponsiveにするTips

この記事はSencha Advent Calendar 2014 11日目の記事です。

ExtJS5にてResponsiveプラグインが導入されました。
このResponsiveを利用してフォームのフィールドラベルの位置を変えてみたい
と思います。

やりたいこと

画面幅が狭ければ、フィールドラベルの位置をTOPに、広ければLEFTにすることで
十分な幅の入力フィールドを保つ。

実装

1 - Formの作成

Ext.define("Adventer.view.form.Form",{

    // {{{ extend

    extend: "Ext.form.Panel",

    // }}}
    // {{{ alias

    alias: 'widget.form-form',

    // }}}
    // {{{ controller

    controller: "form-form",

    // }}}
    // {{{ viewmodel

    viewModel: {
        type: "form-form"
    },

    // }}}
    // {{{ title

    title: 'AdventCalendar 2014',

    // }}}
    // {{{ bodypadding

    bodyPadding: 10,

    // }}}
    // {{{ items

    items: [

        {
            xtype: 'textfield',
            fieldLabel: '氏名'
        },
        {
            xtype: 'textfield',
            fieldLabel: '電話番号'
        }


    ]

    // }}}


});

2 - レスポンシブプラグインを導入

それぞれのfieldにresponsiveプラグインを導入するため、defaults設定を用意しました。

responsiveConfigは、ひとまず縦長であればlabelAlignをtopに、横長であればleftにするように書きました。

    // {{{ defaults

    defaults: {
        labelWidth: 100,
        plugins: 'responsive',
        responsiveConfig: {
            'tall': {
                labelAlign: 'top'
            },
            'wide': {
                labelAlign: 'left'
            }
        }

    },

    // }}}
    // {{{ items

    items: [

        {
            xtype: 'textfield',
            fieldLabel: '氏名'
        },
        {
            xtype: 'textfield',
            fieldLabel: '電話番号'
        }


    ]

    // }}}

結果

textfieldのlabelAlignにはsetterがないとのことです。

3 - アクセサーメソッドを作成

ないなら作ろうと、アクセサーメソッドを作ります。

    // {{{ defaults

    defaults: {
        labelWidth: 100,
        plugins: 'responsive',
        // setter
        setLabelAlign: function(align) {
            this.labelALign = align;
        },
        // getter
        getLabelAlign: function () {
            return this.labelAlign;
        },
        responsiveConfig: {
            'tall': {
                labelAlign: 'top'
            },
            'wide': {
                labelAlign: 'left'
            }
        }

    },

    // }}}

結果

エラーは出なくなりましたが、表示は変わりませんでした。

4 - CSSでなんとか……

labelのpositionはcssでやっていたので、クラスのつけ替えで対応してみようと思います。

    // {{{ defaults

    defaults: {
        labelWidth: 100,
        plugins: 'responsive',
        // setter
        setLabelAlign: function(align) {
            var me = this,
                labelEl = Ext.get(me.labelEl);

            me.labelAlign = align;

            // ラベルがありません
            if (!labelEl) return;

            if (align === 'top') {
                labelEl.addCls('x-form-item-label-top');
            } else {
                labelEl.removeCls('x-form-item-label-top');
                // left時は幅の設定が必要
                labelEl.setWidth(me.labelWidth);
            }

        },
        // getter
        getLabelAlign: function () {
            return this.labelAlign;
        },
        responsiveConfig: {
            'tall': {
                labelAlign: 'top'
            },
            'wide': {
                labelAlign: 'left'
            }
        }

    },

    // }}}

無理矢理感が強いですが、なんとかなりました。

responsiveプラグインにより、画面サイズの変更でsetLabelAlignが呼ばれ、
その中でlabelの位置を変更させています。

まとめ

• Responsiveはアクセサーメソッドがないと使えない
• アクセサーメソッドを作っても、レイアウトは簡単には変えられない。

もっと上手なやり方がありそうな気もしますが、なんとか目的は果たせました。

明日は sugaimasaruさんです。