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 — 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
分享到:
相关推荐
ExtJs:收集基于ExtJs扩展的一些控件 ExtJs:收集基于ExtJs扩展的一些控件
Extjs4 表单从数据库读取数据映射到对应的字段中显示
在extjs3 window窗口中修改完数据退出,提示是否保存,未修改不提示直接退出 本程序在extjs3中测试可行
ExtJs4.2代码例子 ExtJS Window常用方法
NULL 博文链接:https://damoqiongqiu.iteye.com/blog/1922004
自己做的,关于EXTJS 实现最下化功能,点击新建窗口,能创建一个窗口,并在工具条里新建一个那妞与之对应,点击按钮实现最小化,再次点击按钮还原窗口。是我花了三的时间研究出来的,与大家分享!!
extjs-form组件配置参数详解 extjs各种组件说明
extjs4 grid 包括form js代码
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
第二十五讲:extjs4.0的高级组件form补充02 第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的...
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
第二十四讲: EXTJS4.0的高级组件Form补充01 第二十五讲: EXTJS4.0的高级组件Form补充02 第二十六讲: EXTJS4.0的高级组件Panel和Layout上 第二十七讲: EXTJS4.0的高级组件Panel和Layout下 第二十八讲: EXTJS4.0的高级...
eslint-plugin-extjs 使用ExtJS框架的项目的ESLint规则。 这些规则的目标是与ExtJS 4.x一起使用。 欢迎请求与5.x兼容的请求! 规则明细 ext-array-foreach ExtJS提供的两个主要的数组迭代器函数和不同之处在于, ...
Alien::Web::ExtJS::V3 - ExtJS 3.x 源的 Perl 发行版 版本 ExtJS v3.4.11 (GPL) 概要 use Alien::Web::ExtJS::V3 '3.4.11'; my $dir = Alien::Web::ExtJS::V3->dir; print "ExtJS sources are installed in: $dir\...
ExtJS扩展:lovcombo(已解决Bug版) 内赋详细使用说明
一个完整的extjs窗体应用,包含form布局,column布局,很实用!
extJS4.x中文API学习教程Extjs初步获取Extjs下载extjs:
spritemaker_extjs 带有 extjs ui 的 css sprite maker
第二十四讲:extjs4.0的高级组件form补充01 第二十五讲:extjs4.0的高级组件form补充02 第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级...
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901