{"size": 7192, "ext": "js", "max_stars_repo_path": "_src/Chapter 7/touchstart/lib/touch-charts/docs/extjs/test/ui/forms/field-layout.js", "max_stars_repo_name": "paullewallencom/sencha-978-1-8495-1510-8", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "_src/Chapter 7/touchstart/lib/touch-charts/docs/extjs/test/ui/forms/field-layout.js", "max_issues_repo_name": "paullewallencom/sencha-978-1-8495-1510-8", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "_src/Chapter 7/touchstart/lib/touch-charts/docs/extjs/test/ui/forms/field-layout.js", "max_forks_repo_name": "paullewallencom/sencha-978-1-8495-1510-8", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.4503816794, "max_line_length": 254, "alphanum_fraction": 0.4844271413}
/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact:  http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Anchor'
]);

Ext.onReady(function(){

    var fieldNum = 1;

    function label(str) {
        return 'Field ' + fieldNum++ + ' - ' + str;
    }


    function createItemsCfg(labelAlign) {
        var externalId1 = Ext.id(),
            externalId2 = Ext.id();

        var items =  [{
            fieldLabel: label('Plain No Errors'),
            xtype: 'textfield'
        }, {
            fieldLabel: label('Qtip Error'),
            value: '',
            xtype: 'textfield',
            msgTarget: 'qtip',
            allowBlank: false
        }, {
            fieldLabel: label('Title Error'),
            value: '',
            xtype: 'textfield',
            msgTarget: 'title',
            allowBlank: false
        }, {
            fieldLabel: label('Side Error'),
            value: '',
            xtype: 'textfield',
            msgTarget: 'side',
            allowBlank: false
        }, {
            fieldLabel: label('Side Error, !autoFitErrors'),
            value: '',
            xtype: 'textfield',
            msgTarget: 'side',
            allowBlank: false,
            autoFitErrors: false,
            anchor: '-18',
            labelPad: 5
        }, {
            fieldLabel: label('Under Error'),
            value: '',
            xtype: 'textfield',
            msgTarget: 'under',
            allowBlank: false
        }, {
            fieldLabel: label('External Element Error'),
            value: '',
            xtype: 'textfield',
            msgTarget: externalId2,
            allowBlank: false
        }, {
            fieldLabel: label('Fixed Height, Side Error'),
            value: '',
            xtype: 'textareafield',
            msgTarget: 'side',
            allowBlank: false,
            height: 75
        }, {
            fieldLabel: label('Fixed Height, Under Error'),
            value: '',
            xtype: 'textareafield',
            msgTarget: 'under',
            allowBlank: false,
            height: 75
        }, {
            fieldLabel: label('Fixed Height, Side Error, !autoFitErrors'),
            value: '',
            xtype: 'textareafield',
            msgTarget: 'side',
            allowBlank: false,
            height: 75,
            autoFitErrors: false,
            anchor: '-18',
            labelPad: 5
        }, {
            fieldLabel: label('Fixed Height, Under Error, !autoFitErrors'),
            value: '',
            xtype: 'textareafield',
            msgTarget: 'under',
            allowBlank: false,
            height: 75,
            style: 'margin:0 0 24px;',
            autoFitErrors: false
        }, {
            fieldLabel: label('Trigger field, Side Error'),
            xtype: 'triggerfield',
            allowBlank: false,
            value: '',
            msgTarget: 'side'
        }, {
            fieldLabel: label('Trigger field, Side Error, !autoFitErrors'),
            xtype: 'triggerfield',
            allowBlank: false,
            value: '',
            msgTarget: 'side',
            autoFitErrors: false,
            anchor: '-18',
            labelPad: 5
        }, {
            fieldLabel: label('Trigger field, Under Error'),
            xtype: 'triggerfield',
            allowBlank: false,
            value: '',
            msgTarget: 'under'
        }, {
            fieldLabel: label('Checkbox'),
            xtype: 'checkboxfield'
        }];

        // Create a bucket in the external messages area for each field configured with msgTarget:[element id]
        Ext.iterate(items, function(cfg) {
            if (cfg.msgTarget && cfg.msgTarget.indexOf('ext-gen') === 0) {
                Ext.fly('externalErrors').createChild({children: [
                    {tag: 'span', cls: 'label', html: cfg.fieldLabel.replace(/\s-.*/, ': ')},
                    {tag: 'span', cls: 'msg', id: cfg.msgTarget}
                ]});
            }
        });

        return items;
    }




    var buttonsCfg = [{
        text: 'Validate All',
        handler: function() {
            this.up('panel').getForm().getFields().each(function(field) {
                field.validate();
            });
        }
    }, {
        text: 'Reset All',
        handler: function() {
            this.up('panel').getForm().reset();
        }
    }];


    // Labels aligned left (default)
    Ext.create('Ext.form.Panel', {
        title    : 'Labels Aligned Left',
        renderTo : Ext.getBody(),
        bodyPadding: '5px 5px 0',
        margin: '0 0 20px',
        width    : 600,

        fieldDefaults: {
            labelWidth: 230,
            anchor    : '100%'
        },
        items: createItemsCfg('left'),

        buttons: buttonsCfg
    });

    // Labels aligned top
    Ext.create('Ext.form.Panel', {
        title    : 'Labels Aligned Top',
        renderTo : Ext.getBody(),
        bodyPadding: '5px 5px 0',
        margin: '0 0 20px',
        width    : 600,

        fieldDefaults: {
            labelAlign: 'top',
            anchor    : '100%'
        },
        items: createItemsCfg('top'),

        buttons: buttonsCfg
    });

    // Labels aligned right
    Ext.create('Ext.form.Panel', {
        title    : 'Labels Aligned Right',
        renderTo : Ext.getBody(),
        bodyPadding: '5px 5px 0',
        margin: '0 0 20px',
        width    : 600,

        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 230,
            anchor    : '100%'
        },
        items: createItemsCfg('right'),

        buttons: buttonsCfg
    });

    // Labels hidden
    Ext.create('Ext.form.Panel', {
        title    : 'Labels Hidden',
        renderTo : Ext.getBody(),
        bodyPadding: '5px 5px 0',
        margin: '0 0 20px',
        width    : 600,

        fieldDefaults: {
            hideLabel: true,
            anchor    : '100%'
        },
        items: createItemsCfg('left'),

        buttons: buttonsCfg
    });

    /*  (NOTE: add a / at the front of this line to turn on)

    var supportsItems = [];
    Ext.Object.each(Ext.supports, function (name, value) {
        if (typeof(value) != 'function' && name != 'tests') {
            supportsItems.push({
                xtype: 'displayfield',
                fieldLabel: name,
                value: Ext.encode(value)
            });
        }
    });
    Ext.create('Ext.form.Panel', {
        title    : 'Ext Supports',
        renderTo : Ext.getBody(),
        bodyPadding: '5px 5px 0',
        margin: '0 0 20px',
        width    : 600,

        fieldDefaults: {
            labelWidth: 230,
            anchor    : '100%'
        },
        items: supportsItems
    });
    /**/
});

