PortalPanel.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * @class Ext.app.PortalPanel
  3. * @extends Ext.Panel
  4. * A {@link Ext.Panel Panel} class used for providing drag-drop-enabled portal layouts.
  5. */
  6. Ext.define('Ext.ux.portal.PortalPanel', {
  7. extend: 'Ext.panel.Panel',
  8. alias: 'widget.portalpanel',
  9. cls: 'x-portal',
  10. bodyCls: 'x-portal-body',
  11. defaultType: 'portalcolumn',
  12. componentLayout: 'body',
  13. autoScroll: true,
  14. initComponent : function() {
  15. var me = this;
  16. // Implement a Container beforeLayout call from the layout to this Container
  17. this.layout = {
  18. type : 'column'
  19. };
  20. this.callParent();
  21. this.addEvents({
  22. validatedrop: true,
  23. beforedragover: true,
  24. dragover: true,
  25. beforedrop: true,
  26. drop: true
  27. });
  28. this.on('drop', this.doLayout, this);
  29. },
  30. // Set columnWidth, and set first and last column classes to allow exact CSS targeting.
  31. beforeLayout: function() {
  32. var items = this.layout.getLayoutItems(),
  33. len = items.length,
  34. i = 0,
  35. item;
  36. for (; i < len; i++) {
  37. item = items[i];
  38. item.columnWidth = 1 / len;
  39. item.removeCls(['x-portal-column-first', 'x-portal-column-last']);
  40. }
  41. items[0].addCls('x-portal-column-first');
  42. items[len - 1].addCls('x-portal-column-last');
  43. return this.callParent(arguments);
  44. },
  45. // private
  46. initEvents : function(){
  47. this.callParent();
  48. this.dd = Ext.create('Ext.ux.portal.PortalDropZone', this, this.dropConfig);
  49. },
  50. // private
  51. beforeDestroy : function() {
  52. if (this.dd) {
  53. this.dd.unreg();
  54. }
  55. Ext.app.PortalPanel.superclass.beforeDestroy.call(this);
  56. }
  57. });