MainController.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * This class is the controller for the main view for the application. It is specified as
  3. * the "controller" of the Main view class.
  4. */
  5. Ext.define('saas.view.main.MainController', {
  6. extend: 'Ext.app.ViewController',
  7. alias: 'controller.main',
  8. onNavigationTreeSelectionChange: function (tree, node) {
  9. if (node && node.get('viewType')) {
  10. this.setActiveTab(node.getData());
  11. }
  12. },
  13. setActiveTab: function(nodeData) {
  14. var me = this,
  15. refs = me.getReferences(),
  16. mainTab = refs.mainTabPanel,
  17. // existingItem = mainTab.child(type),
  18. newView,
  19. id = 'maintab-' + nodeData.id
  20. ,
  21. title = nodeData.text;
  22. existingItem = mainTab.down('[id=' + id + ']'),
  23. lastView = mainTab.getActiveTab();
  24. if (!existingItem) {
  25. newView = Ext.create('saas.view.core.tab.Panel', {
  26. id: id,
  27. title: title,
  28. tabConfig: nodeData
  29. });
  30. }
  31. if (!newView || !newView.isWindow) {
  32. // !newView means we have an existing view, but if the newView isWindow
  33. // we don't add it to the card layout.
  34. if (existingItem) {
  35. // We don't have a newView, so activate the existing view.
  36. if (existingItem !== lastView) {
  37. mainTab.setActiveTab(existingItem);
  38. }
  39. newView = existingItem;
  40. }
  41. else {
  42. // newView is set (did not exist already), so add it and make it the
  43. // activeItem.
  44. Ext.suspendLayouts();
  45. mainTab.setActiveTab(mainTab.add(newView));
  46. Ext.resumeLayouts(true);
  47. }
  48. }
  49. if (newView.isFocusable(true)) {
  50. newView.focus();
  51. }
  52. },
  53. onToggleNavigationSize: function () {
  54. var me = this,
  55. refs = me.getReferences(),
  56. navigationList = refs.navigationTreeList,
  57. wrapContainer = refs.mainContainerWrap,
  58. collapsing = !navigationList.getMicro(),
  59. new_width = collapsing ? 64 : 250;
  60. if (Ext.isIE9m || !Ext.os.is
  61. .Desktop) {
  62. Ext.suspendLayouts();
  63. refs.mainLogo.setWidth(new_width);
  64. navigationList.setWidth(new_width);
  65. navigationList.setMicro(collapsing);
  66. Ext.resumeLayouts(); // do not flush the layout here...
  67. // No animation for IE9 or lower...
  68. wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
  69. wrapContainer.updateLayout(); // ... since this will flush them
  70. }
  71. else {
  72. if (!collapsing) {
  73. // If we are leaving micro mode (expanding), we do that first so that the
  74. // text of the items in the navlist will be revealed by the animation.
  75. navigationList.setMicro(false);
  76. }
  77. navigationList.canMeasure = false;
  78. // Start this layout first since it does not require a layout
  79. refs.mainLogo.animate({dynamic: true, to: {width: new_width}});
  80. // Directly adjust the width config and then run the main wrap container layout
  81. // as the root layout (it and its chidren). This will cause the adjusted size to
  82. // be flushed to the element and animate to that new size.
  83. navigationList.width = new_width;
  84. wrapContainer.updateLayout({isRoot: true});
  85. navigationList.el.addCls('nav-tree-animating');
  86. // We need to switch to micro mode on the navlist *after* the animation (this
  87. // allows the "sweep" to leave the item text in place until it is no longer
  88. // visible.
  89. if (collapsing) {
  90. navigationList.on({
  91. afterlayoutanimation: function () {
  92. navigationList.setMicro(true);
  93. navigationList.el.removeCls('nav-tree-animating');
  94. navigationList.canMeasure = true;
  95. },
  96. single: true
  97. });
  98. }
  99. }
  100. },
  101. });