EXTJS: Window Form Masking With Statusbar

In this tutorial i want to show you how to masking a form when user enter a submit button, statusbar that used in this tutorial is from the Extjs ux example, so I borrow this cause it is useable plugin, like always on the server side process I use simple PHP scripting. I created this post because when I used a form in Extjs and the user make a request it seem not really responsive, the system should interact the user, inform what is going on in the system and most user is not advance user. Let’s get started:

1. Setting the StatusBar


Copy the StatusBar css file and icon from the default examples to your desired folder,  first the css file you can find it in “extjs/examples/ux/statusbar/css/statusbar.css”, I copy it to another folder called “css” and next the statusbar icon is in “/extjs/examples/ux/statusbar/images” and I copy all the icon files to another folder called “img” most the file structure you can see it on the image on the right, this is how it look in Netbeans project. You can see the “form_masking.html” and “server_response.php” file, this is the main file that we have to create, and it will be mentioned on the next step, but before that we have to edit the StatusBar.css file that we have copied so the icon can be loaded, by changing the “background-image” properties. So find this all code like this
view sourceprint?
1 background-image: url(../images/loading.gif);
Change the background-image to to this code, and do this to all background-image but you only need to change the url path not the image file

view sourceprint?
1 background-image: url(../img/loading.gif);
2. Create the main file

Like usual include EXTJS file in your html header, but this time you need to include the StatusBar.css that you have modified and the StatusBar.js (I don’t modified this file, this file directly linked from the Extjs ux examples, you can found it bundled on the examples)

view sourceprint?
1 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> 

2 <link rel="stylesheet" type="text/css" href="css/StatusBar.css"/> 

3 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> 

4 <script type="text/javascript" src="extjs/ext-all.js"></script> 

5 <script type="text/javascript" src="extjs/examples/ux/statusbar/StatusBar.js"> </script>
3. Create the Form, Function Handler and the Window

I Create a file named “form_masking.html”, the form is similar to the form from the previous post, but in this code I added the key EventObject on the form, so when user press enter on the form, it will submit the form like the traditional html form

view sourceprint?
01 <script type="text/javascript"> 

02 Ext.onReady(function(){ 

03     var formMasking = new Ext.FormPanel({ 

04         frame: false, border: false, buttonAlign: 'center', 

05         url: 'server_response.php', method: 'POST', id: 'frmMasking', 

06         bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;', 

07         labelWidth: 150, width: 300, 

08         items: [{ 

09                 xtype: 'textfield', 

10                 fieldLabel: 'Username', 

11                 name: 'username', 

12                 id: 'formUsername', 

13                 allowBlank: false

14             }, { 

15                 xtype: 'textfield', 

16                 fieldLabel: 'Password', 

17                 name: 'password', 

18                 id: 'formPassword', 

19                 allowBlank: false, 

20                 inputType: 'password'

21             } 

22         ], 

23         keys: [ 

24             { key: [Ext.EventObject.ENTER], fn: fnLogin } 

25         ], 

26         buttons: [ 

27             { text: 'Login', handler: fnLogin }, 

28             { text: 'Reset', handler: function() { 

29                     formMasking.getForm().reset(); 

30                 } 

31             } 

32         ] 

33     }); 

34   

35     function fnLogin() { 

36         // this function must before 

37         Ext.getCmp('frmMasking').on({ 

38             beforeaction: function() { 

39                 Ext.getCmp('winMask').body.mask(); 

40                 Ext.getCmp('sbWin').showBusy(); 

41             } 

42         }); 

43   

44         formMasking.getForm().submit({ 

45             success: function() { 

46                 Ext.getCmp('winMask').body.unmask(); 

47                 Ext.getCmp('sbWin').setStatus({ 

48                     text: 'Login success !', 

49                     iconCls: 'x-status-valid'

50                 }); 

51             }, 

52             failure: function(form, action) { 

53                 Ext.getCmp('winMask').body.unmask(); 

54                 if (action.failureType == 'server') { 

55                     obj = Ext.util.JSON.decode( 

56                         action.response.responseText); 

57                     Ext.getCmp('sbWin').setStatus({ 

58                         text: obj.errors.reason, 

59                         iconCls: 'x-status-error'

60                     }); 

61                 } else { 

62                     if (typeof(action.response) == 'undefined') { 

63                         Ext.getCmp('sbWin').setStatus({ 

64                             text: 'Field cannot be empty !', 

65                             iconCls: 'x-status-error'

66                         }); 

67                     } else { 

68                         Ext.Msg.alert('Warning!', 

69                             'Server is unreachable : '

70                                 + action.response.responseText); 

71                     } 

72                 } 

73             } 

74         }); 

75     } 

76   

77     var winMasking = new Ext.Window({ 

78         title: 'EXTJS &mdash; Window Masking', layout: 'fit', 

79         width: 350, height: 150, resizable: false, closable: false, 

80         items: [formMasking], id:'winMask', 

81         bbar: new Ext.ux.StatusBar({ 

82             text: 'Ready', 

83             id: 'sbWin', 

84             iconCls: 'x-status-saved'

85         }) 

86     }); 

87   

88     winMasking.show(); 

89 }); 

90 </script>
4. The Function Handler

The function handler name is “fnLogin” as you can see on the code above (on the step 3), when the form submitted the event on beforeaction is called an it masking the window, why not mask the form? because when I try mask the form it will only masked the fieldLabel and the textField but not the button, so just mask the window and it will mask everything inside it. The beforeaction event have to be defined before the form submit function, or it wil not work.

5. Create The Server Response

I Create a file named “server_response.php”, the php code is the same as the previous post, it just checking username from the hardcoded array.

view sourceprint?
01 <?php 

02   

03 $username_list = array('admin', 'administrator', 'superadmin', 'john', 'michael'); 

04 if (in_array($_POST['username'], $username_list)) { 

05     echo "{success:true}"; 

06 } 

07 else { 

08     echo "{success:false, errors: { reason: 'User not found !' }}"; 

09 } 

10   

11 ?>
The expected screen should be like the image below, the form when in the default condition, loading, give the error message, and when the success is achieved.











If you want another form load masking example there a sample by Saki here (I think it is more advanced), or if you like to add more advance StatusBar validation you can learn the official samples here. Finally like always I provide the code the be downloaded but I’m not included the Extjs file, you can download it from the official website, here.

DOWNLOAD SOURCE