projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | Ext.define('Admin.view.faq.ItemsController', {\r |
| 2 | extend: 'Ext.app.ViewController',\r | |
| 3 | alias: 'controller.faqitems',\r | |
| 4 | \r | |
| 5 | animateBody: function (body, from, to) {\r | |
| 6 | var view = this.getView();\r | |
| 7 | \r | |
| 8 | body.animate({\r | |
| 9 | duration: 200,\r | |
| 10 | \r | |
| 11 | from: {\r | |
| 12 | height: from\r | |
| 13 | },\r | |
| 14 | to: {\r | |
| 15 | height: to\r | |
| 16 | },\r | |
| 17 | \r | |
| 18 | callback: function () {\r | |
| 19 | var scroller = view.getScrollable(),\r | |
| 20 | parent;\r | |
| 21 | \r | |
| 22 | if (!scroller) {\r | |
| 23 | parent = view.getParent();\r | |
| 24 | scroller = parent && parent.getScrollable();\r | |
| 25 | }\r | |
| 26 | \r | |
| 27 | // We've adjusted the DOM sizes, so we need to ensure the scroller is told\r | |
| 28 | // about it so it will adjust its range.\r | |
| 29 | if (scroller) {\r | |
| 30 | scroller.refresh();\r | |
| 31 | }\r | |
| 32 | }\r | |
| 33 | });\r | |
| 34 | },\r | |
| 35 | \r | |
| 36 | collapseBody: function (node) {\r | |
| 37 | var body = node.down('.faq-body'),\r | |
| 38 | height = body.getHeight();\r | |
| 39 | \r | |
| 40 | // Removing this class will restore height:0, so we need to pass the measured\r | |
| 41 | // height as "from" when we animate.\r | |
| 42 | node.removeCls('faq-expanded');\r | |
| 43 | \r | |
| 44 | this.animateBody(body, height, 0);\r | |
| 45 | },\r | |
| 46 | \r | |
| 47 | expandBody: function (node) {\r | |
| 48 | var body = node.down('.faq-body'),\r | |
| 49 | height;\r | |
| 50 | \r | |
| 51 | // The body has height:0 in CSS, so block that so we can measure it.\r | |
| 52 | body.setStyle('height', 'auto');\r | |
| 53 | height = body.getHeight();\r | |
| 54 | \r | |
| 55 | // This class will also block the height:0 so we'll need to pass "from"\r | |
| 56 | // to animate.\r | |
| 57 | node.addCls('faq-expanded');\r | |
| 58 | \r | |
| 59 | this.animateBody(body, 0, height);\r | |
| 60 | },\r | |
| 61 | \r | |
| 62 | onItemTap: function (sender, index, target, record, event) {\r | |
| 63 | var me = this,\r | |
| 64 | hit = event.getTarget(),\r | |
| 65 | cursor = hit && Ext.fly(hit).getStyle('cursor'),\r | |
| 66 | expanded;\r | |
| 67 | \r | |
| 68 | // Check if the element tapped is styled as a pointer and toggle if so.\r | |
| 69 | if (cursor === 'pointer') {\r | |
| 70 | if (target.hasCls('faq-expanded')) {\r | |
| 71 | me.collapseBody(target);\r | |
| 72 | } else {\r | |
| 73 | // If the target is not expanded, we may need to collapse the currently\r | |
| 74 | // expanded item.\r | |
| 75 | \r | |
| 76 | expanded = sender.element.down('.faq-expanded');\r | |
| 77 | if (expanded) {\r | |
| 78 | me.collapseBody(expanded);\r | |
| 79 | }\r | |
| 80 | \r | |
| 81 | me.expandBody(target);\r | |
| 82 | }\r | |
| 83 | }\r | |
| 84 | }\r | |
| 85 | });\r |