Posted By

JimBarrows on 07/22/10


Tagged

extjs


Versions (?)

EXTJS Base Form


 / Published in: JavaScript
 

This provides an easier way to handle exceptions and common form necessities.

  1. Ext.namespace('Namespace');
  2. Namespace.TheForm = Ext.extend(Ext.form.FormPanel, {
  3.  
  4. id: 'Namespace.TheForm'
  5. ,title: 'Namespace.TheForm'
  6. ,url: '/some/url'
  7. ,waitMessage: 'Please wait.'
  8. ,initComponent: function() {
  9.  
  10. var config = {
  11. items: [{
  12. xtype:'textfield'
  13. ,id: 'StudentVerification.VerificationForm.PinField'
  14. ,fieldLabel: 'PIN'
  15. ,allowBlank:false
  16. ,inputType:'password'
  17. }]
  18. ,buttons: [{
  19. text:'Submit'
  20. ,formBind:true
  21. ,scope:this
  22. ,handler: this.submit
  23. }]
  24. };
  25.  
  26. // apply config
  27. Ext.apply(this, config);
  28. Ext.apply(this.initialConfig, config);
  29.  
  30. Namespace.TheForm.superclass.initComponent.apply(this, arguments);
  31.  
  32. // after parent code here, e.g. install event handlers
  33. // this.on('beforerender', function(dis) {
  34. // alert('before render');
  35. // });
  36. }
  37.  
  38. ,onRender: function() {
  39.  
  40. Namespace.TheForm.superclass.onRender.apply(this, arguments);
  41.  
  42. }
  43.  
  44. ,submit : function(url, waitMsg) {
  45. this.getForm().submit({
  46. url: url
  47. ,scope: this
  48. ,waitMsg: waitMsg
  49. ,success: this.onSuccess
  50. ,failure: this.onFailure
  51. })
  52. }
  53.  
  54. ,onSuccess: function(form, action) {
  55. Ext.Msg.show({
  56. title: 'Success'
  57. ,msg: 'Success!'
  58. ,modal: true
  59. ,icon: Ext.Msg.INFO
  60. ,buttons: Ext.Msg.OK
  61. });
  62. }
  63.  
  64. ,onFailure: function(form, action) {
  65. switch (action.failureType) {
  66. case Ext.form.Action.CLIENT_INVALID:
  67. this.onClientInvalid( form,action);
  68. break;
  69. case Ext.form.Action.CONNECT_FAILURE:
  70. this.onConnectionFailure(form,action);
  71. break;
  72. case Ext.form.Action.SERVER_INVALID:
  73. this.onServerInvalid(form,action);
  74. break;
  75. };
  76. }
  77.  
  78. ,onClientInvalid: function(form,action) {
  79. Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
  80. }
  81.  
  82. ,onConnectionFailure: function(form,action) {
  83. Ext.Msg.alert('Failure', 'Ajax communication failed');
  84. }
  85.  
  86. ,onServerInvalid: function(form,action) {
  87. Ext.Msg.alert('Failure', action.result.msg);
  88. }
  89. });
  90.  
  91. Ext.reg('Namespace.TheForm', Namespace.TheForm);

Report this snippet  

You need to login to post a comment.