/ext-4.1.0_b3/examples/portal/portal.js

https://bitbucket.org/srogerf/javascript · JavaScript · 150 lines · 128 code · 10 blank · 12 comment · 1 complexity · b9ed753911e30ddabced9947b0f9e9b7 MD5 · raw file

  1. /**
  2. * @class Ext.app.Portal
  3. * @extends Object
  4. * A sample portal layout application class.
  5. */
  6. // TODO: Fill in the content panel -- no AccordionLayout at the moment
  7. // TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
  8. // TODO: Fix Ext.Tool scope being set to the panel header
  9. // TODO: Drag/drop does not cause a refresh of scroll overflow when needed
  10. // TODO: Grid portlet throws errors on destroy (grid bug)
  11. // TODO: Z-index issues during drag
  12. Ext.define('Ext.app.Portal', {
  13. extend: 'Ext.container.Viewport',
  14. //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
  15. uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
  16. getTools: function(){
  17. return [{
  18. xtype: 'tool',
  19. type: 'gear',
  20. handler: function(e, target, panelHeader, tool){
  21. var portlet = panelHeader.ownerCt;
  22. portlet.setLoading('Loading...');
  23. Ext.defer(function() {
  24. portlet.setLoading(false);
  25. }, 2000);
  26. }
  27. }];
  28. },
  29. initComponent: function(){
  30. var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
  31. Ext.apply(this, {
  32. id: 'app-viewport',
  33. layout: {
  34. type: 'border',
  35. padding: '0 5 5 5' // pad the layout from the window edges
  36. },
  37. items: [{
  38. id: 'app-header',
  39. xtype: 'box',
  40. region: 'north',
  41. height: 40,
  42. html: 'Ext Portal'
  43. },{
  44. xtype: 'container',
  45. region: 'center',
  46. layout: 'border',
  47. items: [{
  48. id: 'app-options',
  49. title: 'Options',
  50. region: 'west',
  51. animCollapse: true,
  52. width: 200,
  53. minWidth: 150,
  54. maxWidth: 400,
  55. split: true,
  56. collapsible: true,
  57. layout:{
  58. type: 'accordion',
  59. animate: true
  60. },
  61. items: [{
  62. html: content,
  63. title:'Navigation',
  64. autoScroll: true,
  65. border: false,
  66. iconCls: 'nav'
  67. },{
  68. title:'Settings',
  69. html: content,
  70. border: false,
  71. autoScroll: true,
  72. iconCls: 'settings'
  73. }]
  74. },{
  75. id: 'app-portal',
  76. xtype: 'portalpanel',
  77. region: 'center',
  78. items: [{
  79. id: 'col-1',
  80. items: [{
  81. id: 'portlet-1',
  82. title: 'Grid Portlet',
  83. tools: this.getTools(),
  84. items: Ext.create('Ext.app.GridPortlet'),
  85. listeners: {
  86. 'close': Ext.bind(this.onPortletClose, this)
  87. }
  88. },{
  89. id: 'portlet-2',
  90. title: 'Portlet 2',
  91. tools: this.getTools(),
  92. html: content,
  93. listeners: {
  94. 'close': Ext.bind(this.onPortletClose, this)
  95. }
  96. }]
  97. },{
  98. id: 'col-2',
  99. items: [{
  100. id: 'portlet-3',
  101. title: 'Portlet 3',
  102. tools: this.getTools(),
  103. html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
  104. listeners: {
  105. 'close': Ext.bind(this.onPortletClose, this)
  106. }
  107. }]
  108. },{
  109. id: 'col-3',
  110. items: [{
  111. id: 'portlet-4',
  112. title: 'Stock Portlet',
  113. tools: this.getTools(),
  114. items: Ext.create('Ext.app.ChartPortlet'),
  115. listeners: {
  116. 'close': Ext.bind(this.onPortletClose, this)
  117. }
  118. }]
  119. }]
  120. }]
  121. }]
  122. });
  123. this.callParent(arguments);
  124. },
  125. onPortletClose: function(portlet) {
  126. this.showMsg('"' + portlet.title + '" was removed');
  127. },
  128. showMsg: function(msg) {
  129. var el = Ext.get('app-msg'),
  130. msgId = Ext.id();
  131. this.msgId = msgId;
  132. el.update(msg).show();
  133. Ext.defer(this.clearMsg, 3000, this, [msgId]);
  134. },
  135. clearMsg: function(msgId) {
  136. if (msgId === this.msgId) {
  137. Ext.get('app-msg').hide();
  138. }
  139. }
  140. });