modx.panel.wizard.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. MODx.Wizard = function(config) {
  2. config = config || {};
  3. Ext.applyIf(config,{
  4. layout: 'card'
  5. ,layoutConfig: {
  6. layoutOnCardChange: true
  7. ,deferredRender: false
  8. }
  9. ,activeItem: 0
  10. ,closeAction: 'hide'
  11. ,resizable: true
  12. ,collapsible: true
  13. ,maximizable: true
  14. ,autoHeight: true
  15. ,anchor: '90%'
  16. ,width: '90%'
  17. ,defaults: { border: false }
  18. ,modal: Ext.isIE ? false : true
  19. ,hideMode: 'offsets'
  20. ,cls: 'modx-window'
  21. ,bbar: [{
  22. itemId: 'btn-back'
  23. ,text: _('back')
  24. ,handler: function() { this.fireEvent('backward'); }
  25. ,scope: this
  26. ,disabled: true
  27. },{
  28. itemId: 'btn-next'
  29. ,text: _('next')
  30. ,handler: function() { this.fireEvent('forward'); }
  31. ,scope: this
  32. }]
  33. ,firstPanel: ''
  34. ,lastPanel: ''
  35. ,showFirstPanel: true
  36. });
  37. MODx.Wizard.superclass.constructor.call(this,config);
  38. this.lastActiveItem = config.firstPanel;
  39. this.config = config;
  40. this.addEvents({
  41. 'forward': true
  42. ,'backward': true
  43. ,'proceed': true
  44. ,'finish': true
  45. ,'ready': true
  46. });
  47. this.on('show',this.onShow,this);
  48. this.on('forward',this.onForward,this);
  49. this.on('backward',this.onBackward,this);
  50. this.on('proceed',this.proceed,this);
  51. };
  52. Ext.extend(MODx.Wizard,Ext.Window,{
  53. windows: {}
  54. ,onForward: function() {
  55. this.navHandler(1);
  56. }
  57. ,onBackward: function() {
  58. this.navHandler(-1);
  59. }
  60. ,onShow: function() {
  61. if (this.config.showFirstPanel) {
  62. this.getBottomToolbar().getComponent('btn-next').setText(_('next'));
  63. }
  64. if (this.config.showFirstPanel) {
  65. if (this.fireEvent('proceed',this.config.firstPanel)) {
  66. this.fireEvent('ready');
  67. }
  68. } else {
  69. this.fireEvent('ready');
  70. }
  71. }
  72. ,navHandler: function(dir) {
  73. this.doLayout();
  74. var a = this.getLayout().activeItem;
  75. if (dir === -1) {
  76. this.fireEvent('proceed',a.config.back || a.config.id);
  77. } else {
  78. a.submit();
  79. }
  80. }
  81. ,proceed: function(panel) {
  82. var tb = this.getBottomToolbar();
  83. if (!tb) return false;
  84. this.getLayout().setActiveItem(panel);
  85. if (panel == this.config.firstPanel) {
  86. tb.getComponent('btn-back').setDisabled(true);
  87. } else if (panel == this.config.lastPanel) {
  88. tb.getComponent('btn-next').setText(_('finish'));
  89. } else {
  90. tb.getComponent('btn-back').setDisabled(false);
  91. tb.getComponent('btn-next').setText(_('next'));
  92. }
  93. var s = Ext.getCmp(panel).fireEvent('fetch');
  94. if (s) {
  95. if (!Ext.isIE) {
  96. this.syncSize();
  97. this.center();
  98. }
  99. }
  100. return true;
  101. }
  102. });
  103. Ext.reg('modx-wizard',MODx.Wizard);
  104. MODx.panel.WizardPanel = function(config) {
  105. config = config || {};
  106. Ext.applyIf(config,{
  107. autoHeight: true
  108. ,bodyStyle: 'padding: 20px'
  109. });
  110. MODx.panel.WizardPanel.superclass.constructor.call(this,config);
  111. this.config = config;
  112. this.addEvents({ 'fetch': true });
  113. this.on('fetch',this.fetch,this);
  114. };
  115. Ext.extend(MODx.panel.WizardPanel,Ext.FormPanel,{
  116. fetch: function() { return true; }
  117. ,submit: function() { return true; }
  118. });
  119. Ext.reg('panel-wizard-panel',MODx.panel.WizardPanel);