5-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-응답 플러그인 가져오기
각각의 필드에responsive 플러그인을 가져오기 위해defaults 설정을 준비했습니다.
responsiveConfig, 우선 종장이면 label Align을 top에 쓰고, 횡장이면 left를 쓴다.

    // {{{ defaults

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

    },

    // }}}
    // {{{ items

    items: [

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


    ]

    // }}}

결실

textfield의 label Align에는 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

를 사용할 수 없음

액세서리를 만드는 방법이라도 레이아웃을 간단하게 바꿀 수는 없다.

더 좋은 방법이 있을 것 같았지만 드디어 목적을 달성했다.
내일은 슈가마 사루씨입니다.