--- /dev/null
+/*!
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * Tests Ext.data.Store functionality
+ * @author Ed Spencer
+ */
+(function() {
+ var suite = Ext.test.session.getSuite('Ext.layout.VBoxLayout'),
+ assert = Y.Assert;
+
+ function buildFakeChild(config) {
+ config = config || {};
+
+ Ext.applyIf(config, {
+ getWidth: function() {
+ return 10;
+ },
+ getHeight: function() {
+ return 10;
+ },
+ getSize: function() {
+ return {
+ height: 10,
+ width : 10
+ };
+ },
+ margins: {
+ top : 0,
+ right : 0,
+ bottom: 0,
+ left : 0
+ }
+ });
+
+ return config;
+ }
+
+ function buildLayout(config) {
+ config = config || {};
+
+ Ext.applyIf(config, {
+ padding: {
+ top : 0,
+ right : 0,
+ bottom: 0,
+ left : 0
+ }
+ });
+
+ return new Ext.layout.VBoxLayout(config);
+ };
+
+ suite.add(new Y.Test.Case({
+ name: 'calculating flexed box sizes',
+
+ setUp: function() {
+ this.layout = buildLayout();
+
+ this.items = [
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 1})
+ ];
+
+ this.targetSize = {
+ height: 400,
+ width : 100
+ };
+ },
+
+ testEqualFlexHeights: function() {
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(100, boxes[0].height);
+ assert.areEqual(100, boxes[1].height);
+ assert.areEqual(100, boxes[2].height);
+ assert.areEqual(100, boxes[3].height);
+ },
+
+ testDifferentFlexWidths: function() {
+ this.items = [
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 2}),
+ buildFakeChild({flex: 3}),
+ buildFakeChild({flex: 4})
+ ];
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(40, boxes[0].height);
+ assert.areEqual(80, boxes[1].height);
+ assert.areEqual(120, boxes[2].height);
+ assert.areEqual(160, boxes[3].height);
+ },
+
+ testMarginsAccountedFor: function() {
+ var items = [
+ buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
+ buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
+ buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
+ buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}})
+ ];
+
+ var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(80, boxes[0].height);
+ assert.areEqual(80, boxes[1].height);
+ assert.areEqual(80, boxes[2].height);
+ assert.areEqual(80, boxes[3].height);
+ },
+
+ testPaddingAccountedFor: function() {
+ this.layout = buildLayout({
+ padding: {
+ top : 10,
+ right : 10,
+ bottom: 10,
+ left : 10
+ }
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ //400px available internally, minus 20px total left + right padding = 380 / 4
+ assert.areEqual(95, boxes[0].height);
+ assert.areEqual(95, boxes[1].height);
+ assert.areEqual(95, boxes[2].height);
+ assert.areEqual(95, boxes[3].height);
+ },
+
+ //one of the items is passed both a width and a flex - the flex should be ignored
+ testHeightDominatesFlex: function() {
+ var items = [
+ buildFakeChild({flex: 1, height: 250, getHeight: function() {return 250;}}),
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 1}),
+ buildFakeChild({flex: 1})
+ ];
+
+ var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(250, boxes[0].height);
+ assert.areEqual(50, boxes[1].height);
+ assert.areEqual(50, boxes[2].height);
+ assert.areEqual(50, boxes[3].height);
+ },
+
+ testHeightPropertyDominatesGetHeight: function() {
+ var layout = buildLayout({
+ pack : 'start',
+ align: 'stretch'
+ });
+
+ var items = [
+ {
+ title: 'Panel 1',
+ flex: 1,
+ html: 'flex : 1',
+ frame: true,
+ margins: {top: 0, left: 0, right: 0, bottom: 0},
+ getHeight: function() {return 10;},
+ getWidth: function() {return 10;}
+ }, {
+ title: 'Panel 2',
+ height: 100,
+ html: 'width : 100',
+ frame: true,
+ margins: {top: 0, left: 0, right: 0, bottom: 0},
+ getWidth: function() {return 10;},
+
+ //NOTE: this should be ignored by HBox because we have a different configured width property
+ getHeight: function() {return 10;}
+ }, {
+ title: 'Panel 3',
+ flex: 2,
+ html: 'flex : 2',
+ frame: true,
+ margins: {top: 0, left: 0, right: 0, bottom: 0},
+ getHeight: function() {return 10;},
+ getWidth: function() {return 10;}
+ }
+ ];
+
+ var targetSize = {
+ height: 1628,
+ width : 630
+ };
+
+ var calcs = layout.calculateChildBoxes(items, targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(0, boxes[0].top);
+ assert.areEqual(510, boxes[1].top);
+ assert.areEqual(610, boxes[2].top);
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'aligning',
+
+ setUp: function() {
+ this.items = [
+ buildFakeChild({flex: 1, getWidth: function() {return 10;}}),
+ buildFakeChild({flex: 1, getWidth: function() {return 20;}}),
+ buildFakeChild({flex: 1, getWidth: function() {return 30;}}),
+ buildFakeChild({flex: 1, getWidth: function() {return 40;}})
+ ];
+
+ this.targetSize = {
+ height: 400,
+ width : 100
+ };
+ },
+
+ testLeft: function() {
+ this.layout = buildLayout({
+ align: 'left'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(0, boxes[0].left);
+ assert.areEqual(0, boxes[1].left);
+ assert.areEqual(0, boxes[2].left);
+ assert.areEqual(0, boxes[3].left);
+ },
+
+ testMiddle: function() {
+ this.layout = buildLayout({
+ align: 'center'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(45, boxes[0].left);
+ assert.areEqual(40, boxes[1].left);
+ assert.areEqual(35, boxes[2].left);
+ assert.areEqual(30, boxes[3].left);
+ },
+
+ testStretch: function() {
+ this.layout = buildLayout({
+ align: 'stretch'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(0, boxes[0].left);
+ assert.areEqual(0, boxes[1].left);
+ assert.areEqual(0, boxes[2].left);
+ assert.areEqual(0, boxes[3].left);
+
+ assert.areEqual(100, boxes[0].width);
+ assert.areEqual(100, boxes[1].width);
+ assert.areEqual(100, boxes[2].width);
+ assert.areEqual(100, boxes[3].width);
+ },
+
+ testStretchMax: function() {
+ this.layout = buildLayout({
+ align: 'stretchmax'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(0, boxes[0].left);
+ assert.areEqual(0, boxes[1].left);
+ assert.areEqual(0, boxes[2].left);
+ assert.areEqual(0, boxes[3].left);
+
+ assert.areEqual(40, boxes[0].width);
+ assert.areEqual(40, boxes[1].width);
+ assert.areEqual(40, boxes[2].width);
+ assert.areEqual(40, boxes[3].width);
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'packing',
+
+ setUp: function() {
+ this.items = [
+ buildFakeChild({getSize: function() {return {width: 10, height: 10};}}),
+ buildFakeChild({getSize: function() {return {width: 10, height: 20};}}),
+ buildFakeChild({getSize: function() {return {width: 10, height: 30};}}),
+ buildFakeChild({getSize: function() {return {width: 10, height: 40};}})
+ ];
+
+ this.targetSize = {
+ height: 400,
+ width : 100
+ };
+ },
+
+ testPackStart: function() {
+ this.layout = buildLayout({
+ pack: 'start'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(0, boxes[0].top);
+ assert.areEqual(10, boxes[1].top);
+ assert.areEqual(30, boxes[2].top);
+ assert.areEqual(60, boxes[3].top);
+ },
+
+ testPackCenter: function() {
+ this.layout = buildLayout({
+ pack: 'center'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(150, boxes[0].top);
+ assert.areEqual(160, boxes[1].top);
+ assert.areEqual(180, boxes[2].top);
+ assert.areEqual(210, boxes[3].top);
+ },
+
+ testPackEnd: function() {
+ this.layout = buildLayout({
+ pack: 'end'
+ });
+
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ boxes = calcs.boxes;
+
+ assert.areEqual(300, boxes[0].top);
+ assert.areEqual(310, boxes[1].top);
+ assert.areEqual(330, boxes[2].top);
+ assert.areEqual(360, boxes[3].top);
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'meta data from calculated box sizes',
+
+ setUp: function() {
+ this.layout = buildLayout();
+
+ this.items = [
+ buildFakeChild({getWidth: function() {return 50;}, flex: 1}),
+ buildFakeChild({getWidth: function() {return 60;}, flex: 1}),
+ buildFakeChild({getWidth: function() {return 10;}, flex: 1}),
+ buildFakeChild({getWidth: function() {return 80;}, flex: 1})
+ ];
+
+ this.targetSize = {
+ height: 400,
+ width : 100
+ };
+ },
+
+ testMaxHeight: function() {
+ var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
+ meta = calcs.meta;
+
+ assert.areEqual(80, meta.maxWidth);
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'update innerCt size',
+
+ setUp: function() {
+ this.layout = buildLayout({
+ align : 'stretch',
+ padding: {
+ top : 0,
+ bottom: 0,
+ left : 10,
+ right : 20
+ }
+ });
+
+ //fake the values that are calculated during onLayout
+ this.layoutTargetLastSize = {
+ width : 100,
+ height: 400
+ };
+
+ this.childBoxCache = {
+ meta: {
+ maxWidth: 150
+ }
+ };
+ },
+
+ testMaintainsWidthForAlignStretch: function() {
+ var layout = this.layout,
+ width, height;
+
+ //a fake innerCt element that we can intercept calls to setSize on
+ layout.innerCt = {
+ setSize: function(widthArg, heightArg) {
+ width = widthArg;
+ height = heightArg;
+ }
+ };
+
+ layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
+
+ assert.areSame(100, width);
+ assert.areSame(400, height);
+ },
+
+ //if aligning middle, increase height to accomodate the tallest child
+ testIncreasesWidthForAlignMiddle: function() {
+ this.layout = buildLayout({
+ align : 'middle',
+ padding: {
+ top : 0,
+ bottom: 0,
+ left : 10,
+ right : 20
+ }
+ });
+
+ var layout = this.layout,
+ width, height;
+
+ //a fake innerCt element that we can intercept calls to setSize on
+ layout.innerCt = {
+ setSize: function(widthArg, heightArg) {
+ width = widthArg;
+ height = heightArg;
+ }
+ };
+
+ layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
+
+ assert.areSame(180, width);
+ assert.areSame(400, height);
+ }
+ }));
+})();
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff