add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / layout / component / field / FieldContainer.js

describe("Ext.layout.component.field.FieldContainer", function() {\r
    \r
    it("should account for left/right any padding supplied by the fieldBodyCls", function() {\r
        var fc = Ext.create('Ext.form.FieldContainer', {\r
            renderTo: Ext.getBody(),\r
            hideLabel: true,\r
            layout: {\r
                type: 'hbox',\r
                align: 'stretch'\r
            },\r
            width: 300,\r
            height: 50,\r
            defaultType: 'component',\r
            items: [{\r
                flex: 1\r
            }, {\r
                flex: 1\r
            }]\r
        });\r
        // Simulate bodyCls setting padding: 1px\r
        fc.bodyEl.setStyle('padding', '1px');\r
        fc.updateLayout();\r
        expect(fc.items.first().getWidth()).toBe(149);\r
        expect(fc.items.last().getWidth()).toBe(149);\r
        fc.destroy();\r
    });\r
    \r
    it("should account for top/bottom any padding supplied by the fieldBodyCls", function() {\r
        var fc = Ext.create('Ext.form.FieldContainer', {\r
            renderTo: Ext.getBody(),\r
            hideLabel: true,\r
            layout: {\r
                type: 'hbox',\r
                align: 'stretch'\r
            },\r
            width: 300,\r
            height: 50,\r
            items: [{\r
                xtype: 'component',\r
                flex: 1\r
            }]\r
        });\r
        // Simulate bodyCls setting padding: 1px\r
        fc.bodyEl.setStyle('padding', '1px');\r
        fc.updateLayout();\r
        expect(fc.items.first().getHeight()).toBe(48);\r
        fc.destroy();\r
    });\r
\r
    it("should correctly measure content height when its container layout is hbox", function() {\r
        // EXTJSIV-12665\r
        var panel = Ext.widget({\r
            xtype: 'panel',\r
            renderTo: document.body,\r
            layout: 'anchor',\r
            bodyPadding: 10,\r
            items: [{\r
                xtype: 'fieldcontainer',\r
                id: 'field-ct',\r
                layout: 'hbox',\r
                items: [{\r
                    xtype: 'component',\r
                    style: 'height: 22px; width: 150px; background-color: green;',\r
                    html: ' '\r
                }]\r
            }]\r
        });\r
\r
        expect(panel.getHeight()).toBe(49);\r
        expect(Ext.getCmp('field-ct').getHeight()).toBe(22);\r
\r
        panel.destroy();\r
    });\r
\r
    it("should shrink wrap liquid layout children when using a box layout", function() {\r
        var fc = Ext.widget({\r
            xtype: 'fieldcontainer',\r
            renderTo: document.body,\r
            layout: 'hbox',\r
            items: [{\r
                xtype: 'textfield',\r
                width: 300,\r
                value: 'foo'\r
            }]\r
        });\r
\r
        expect(fc.getHeight()).toBe(22);\r
        expect(fc.getWidth()).toBe(300);\r
        fc.destroy();\r
    });\r
\r
    it("should publish the correct inner width for the layout of its items", function() {\r
        var fc = Ext.widget({\r
            renderTo: document.body,\r
            xtype: 'fieldcontainer',\r
            width: 500,\r
            fieldLabel: 'Label',\r
            msgTarget : 'side',\r
            layout: 'hbox',\r
            items: [{\r
                flex: 1,\r
                xtype: 'textfield'\r
            }]\r
        });\r
\r
        expect(fc.getWidth()).toBe(500);\r
        expect(fc.labelEl.getWidth()).toBe(105);\r
        expect(fc.bodyEl.getWidth()).toBe(395);\r
        expect(fc.items.getAt(0).getWidth()).toBe(395);\r
\r
        // make sure the child gets resized when side error is shown.\r
        fc.setActiveError('Error');\r
\r
        expect(fc.getWidth()).toBe(500);\r
        expect(fc.labelEl.getWidth()).toBe(105);\r
        expect(fc.bodyEl.getWidth()).toBe(377);\r
        expect(fc.errorWrapEl.getWidth()).toBe(18);\r
        expect(fc.items.getAt(0).getWidth()).toBe(377);\r
\r
        fc.destroy();\r
    });\r
\r
    it("should publish the correct inner height for the layout of its items", function() {\r
        var fc = Ext.widget({\r
            renderTo: document.body,\r
            xtype: 'fieldcontainer',\r
            height: 200,\r
            fieldLabel: 'Label',\r
            labelAlign: 'top',\r
            msgTarget : 'under',\r
            layout: 'vbox',\r
            items: [{\r
                flex: 1,\r
                width: 100,\r
                xtype: 'component',\r
                style: 'background-color:green;'\r
            }]\r
        });\r
\r
        expect(fc.getHeight()).toBe(200);\r
        expect(fc.labelEl.getHeight()).toBe(23);\r
        expect(fc.bodyEl.getHeight()).toBe(177);\r
        expect(fc.items.getAt(0).getHeight()).toBe(177);\r
\r
        // make sure the child gets resized when side error is shown.\r
        fc.setActiveError('Error');\r
\r
        expect(fc.getHeight()).toBe(200);\r
        expect(fc.labelEl.getHeight()).toBe(23);\r
        expect(fc.bodyEl.getHeight()).toBe(157);\r
        expect(fc.errorWrapEl.getHeight()).toBe(20);\r
        expect(fc.items.getAt(0).getHeight()).toBe(157);\r
\r
        fc.destroy();\r
    });\r
});\r