projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | xdescribe("Ext.layout.component.field.Trigger", function(){\r |
| 2 | var text, trigger, width, height;\r | |
| 3 | \r | |
| 4 | afterEach(function(){\r | |
| 5 | Ext.destroy(text, trigger);\r | |
| 6 | text = trigger = width = null;\r | |
| 7 | });\r | |
| 8 | \r | |
| 9 | describe("shrink wrap", function(){\r | |
| 10 | \r | |
| 11 | describe("without label", function() {\r | |
| 12 | \r | |
| 13 | it("should have the same size as a text field with a single trigger", function(){\r | |
| 14 | text = new Ext.form.field.Text({\r | |
| 15 | renderTo: Ext.getBody(),\r | |
| 16 | shrinkWrap: 3\r | |
| 17 | });\r | |
| 18 | trigger = new Ext.form.field.Trigger({\r | |
| 19 | renderTo: Ext.getBody(),\r | |
| 20 | shrinkWrap: 3\r | |
| 21 | });\r | |
| 22 | width = text.getWidth();\r | |
| 23 | \r | |
| 24 | expect(trigger.getWidth()).toBe(width);\r | |
| 25 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth());\r | |
| 26 | });\r | |
| 27 | \r | |
| 28 | it("should have the same size as a text field with a 3 triggers", function(){\r | |
| 29 | text = new Ext.form.field.Text({\r | |
| 30 | renderTo: Ext.getBody(),\r | |
| 31 | shrinkWrap: 3\r | |
| 32 | });\r | |
| 33 | trigger = new Ext.form.field.Trigger({\r | |
| 34 | renderTo: Ext.getBody(),\r | |
| 35 | shrinkWrap: 3,\r | |
| 36 | trigger1Cls: 'foo',\r | |
| 37 | trigger2Cls: 'bar',\r | |
| 38 | trigger3Cls: 'baz'\r | |
| 39 | });\r | |
| 40 | width = text.getWidth();\r | |
| 41 | \r | |
| 42 | expect(trigger.getWidth()).toBe(width);\r | |
| 43 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth());\r | |
| 44 | });\r | |
| 45 | \r | |
| 46 | it("should respect an inputWidth", function(){\r | |
| 47 | trigger = new Ext.form.field.Trigger({\r | |
| 48 | renderTo: Ext.getBody(),\r | |
| 49 | shrinkWrap: 3,\r | |
| 50 | inputWidth: 200\r | |
| 51 | });\r | |
| 52 | expect(trigger.getWidth()).toBe(200);\r | |
| 53 | expect(trigger.inputEl.getWidth()).toBe(200 - trigger.getTriggerWidth());\r | |
| 54 | });\r | |
| 55 | });\r | |
| 56 | \r | |
| 57 | describe("with label", function(){\r | |
| 58 | \r | |
| 59 | describe("labelAlign: 'left'", function() {\r | |
| 60 | \r | |
| 61 | it("should take into account labelWidth", function(){\r | |
| 62 | text = new Ext.form.field.Text({\r | |
| 63 | renderTo: Ext.getBody(),\r | |
| 64 | shrinkWrap: 3,\r | |
| 65 | labelWidth: 150,\r | |
| 66 | fieldLabel: 'A label'\r | |
| 67 | });\r | |
| 68 | trigger = new Ext.form.field.Trigger({\r | |
| 69 | renderTo: Ext.getBody(),\r | |
| 70 | shrinkWrap: 3,\r | |
| 71 | labelWidth: 150,\r | |
| 72 | fieldLabel: 'A label'\r | |
| 73 | });\r | |
| 74 | width = text.getWidth();\r | |
| 75 | \r | |
| 76 | expect(trigger.getWidth()).toBe(width);\r | |
| 77 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth() - trigger.labelWidth - trigger.labelPad);\r | |
| 78 | });\r | |
| 79 | \r | |
| 80 | it("should take into account labelPad", function(){\r | |
| 81 | text = new Ext.form.field.Text({\r | |
| 82 | renderTo: Ext.getBody(),\r | |
| 83 | shrinkWrap: 3,\r | |
| 84 | labelPad: 20,\r | |
| 85 | fieldLabel: 'A label'\r | |
| 86 | });\r | |
| 87 | trigger = new Ext.form.field.Trigger({\r | |
| 88 | renderTo: Ext.getBody(),\r | |
| 89 | shrinkWrap: 3,\r | |
| 90 | labelPad: 20,\r | |
| 91 | fieldLabel: 'A label'\r | |
| 92 | });\r | |
| 93 | width = text.getWidth();\r | |
| 94 | \r | |
| 95 | expect(trigger.getWidth()).toBe(width);\r | |
| 96 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth() - trigger.labelWidth - trigger.labelPad);\r | |
| 97 | });\r | |
| 98 | });\r | |
| 99 | \r | |
| 100 | describe("labelAlign: 'top'", function(){\r | |
| 101 | it("should take ignore labelWidth", function(){\r | |
| 102 | text = new Ext.form.field.Text({\r | |
| 103 | renderTo: Ext.getBody(),\r | |
| 104 | shrinkWrap: 3,\r | |
| 105 | labelWidth: 150,\r | |
| 106 | fieldLabel: 'A label',\r | |
| 107 | labelAlign: 'top'\r | |
| 108 | });\r | |
| 109 | trigger = new Ext.form.field.Trigger({\r | |
| 110 | renderTo: Ext.getBody(),\r | |
| 111 | shrinkWrap: 3,\r | |
| 112 | labelWidth: 150,\r | |
| 113 | fieldLabel: 'A label',\r | |
| 114 | labelAlign: 'top'\r | |
| 115 | });\r | |
| 116 | width = text.getWidth();\r | |
| 117 | \r | |
| 118 | expect(trigger.getWidth()).toBe(width);\r | |
| 119 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth());\r | |
| 120 | });\r | |
| 121 | \r | |
| 122 | it("should take into account labelPad", function(){\r | |
| 123 | text = new Ext.form.field.Text({\r | |
| 124 | renderTo: Ext.getBody(),\r | |
| 125 | shrinkWrap: 3,\r | |
| 126 | labelPad: 20,\r | |
| 127 | fieldLabel: 'A label',\r | |
| 128 | labelAlign: 'top'\r | |
| 129 | });\r | |
| 130 | trigger = new Ext.form.field.Trigger({\r | |
| 131 | renderTo: Ext.getBody(),\r | |
| 132 | shrinkWrap: 3,\r | |
| 133 | labelPad: 20,\r | |
| 134 | fieldLabel: 'A label',\r | |
| 135 | labelAlign: 'top'\r | |
| 136 | });\r | |
| 137 | width = text.getWidth();\r | |
| 138 | \r | |
| 139 | expect(trigger.getWidth()).toBe(width);\r | |
| 140 | expect(trigger.inputEl.getWidth()).toBe(width - trigger.getTriggerWidth());\r | |
| 141 | });\r | |
| 142 | });\r | |
| 143 | });\r | |
| 144 | \r | |
| 145 | });\r | |
| 146 | \r | |
| 147 | describe("configured", function() {\r | |
| 148 | describe("height", function() {\r | |
| 149 | beforeEach(function() {\r | |
| 150 | text = new Ext.form.field.Text({\r | |
| 151 | renderTo: Ext.getBody(),\r | |
| 152 | height: 200\r | |
| 153 | });\r | |
| 154 | \r | |
| 155 | trigger = new Ext.form.field.Trigger({\r | |
| 156 | renderTo: Ext.getBody(),\r | |
| 157 | height: 200\r | |
| 158 | });\r | |
| 159 | \r | |
| 160 | height = text.getHeight();\r | |
| 161 | });\r | |
| 162 | \r | |
| 163 | it("should have the same height as text field", function() {\r | |
| 164 | expect(trigger.getHeight()).toBe(height);\r | |
| 165 | // AND\r | |
| 166 | expect(trigger.inputEl.getHeight()).toBe(height);\r | |
| 167 | });\r | |
| 168 | });\r | |
| 169 | \r | |
| 170 | describe("width", function() {\r | |
| 171 | beforeEach(function() {\r | |
| 172 | text = new Ext.form.field.Text({\r | |
| 173 | renderTo: Ext.getBody(),\r | |
| 174 | width: 300\r | |
| 175 | });\r | |
| 176 | \r | |
| 177 | trigger = new Ext.form.field.Trigger({\r | |
| 178 | renderTo: Ext.getBody(),\r | |
| 179 | hideTrigger: true,\r | |
| 180 | width: 300\r | |
| 181 | });\r | |
| 182 | \r | |
| 183 | width = text.getWidth();\r | |
| 184 | });\r | |
| 185 | \r | |
| 186 | it("should have the same width as text field w/o trigger", function() {\r | |
| 187 | expect(trigger.getWidth()).toBe(width);\r | |
| 188 | // AND\r | |
| 189 | expect(trigger.inputEl.getWidth()).toBe(width);\r | |
| 190 | });\r | |
| 191 | \r | |
| 192 | it("should have the same overall width as text field w/ trigger", function() {\r | |
| 193 | var outerWidth = trigger.getWidth();\r | |
| 194 | \r | |
| 195 | expect(outerWidth).toBe(width);\r | |
| 196 | \r | |
| 197 | var inputWidth = trigger.inputEl.getWidth(),\r | |
| 198 | triggerWidth = 0;\r | |
| 199 | \r | |
| 200 | for (var i = 0, l = trigger.triggerEl.elements.length; i < l; i++) {\r | |
| 201 | var el = trigger.triggerEl.elements[i];\r | |
| 202 | \r | |
| 203 | triggerWidth += el.getWidth();\r | |
| 204 | }\r | |
| 205 | \r | |
| 206 | expect(inputWidth + triggerWidth).toBe(width);\r | |
| 207 | });\r | |
| 208 | });\r | |
| 209 | });\r | |
| 210 | });\r |