Hi guys today I will discuss how to use ajax in extjs before we start run your text editor of choice mine is dreamweaver cs4. I will focus on mysql I want you to work on it. Just basic php code and mysql query.
We will now dive in to the real world.
DOWNLOAD SOURCE FILE: http://www.4shared.com/file/_RjrDyEb/demo.html
DOWNLOAD SOURCE FILE: http://www.4shared.com/file/_RjrDyEb/demo.html
Step 1: make a index.php page this is were we call the extjs.
1 <html>
2 <head>
3 <title>Easydownload</title>
4
5 <link rel="stylesheet" href="ext-3.3/resources/css/ext-all.css" />
6
7 <script type="type/javascript" src="ext-3.3/adapter/ext/ext-base.js"></script>
8 <script type="type/javascript" src="ext-3.3/ext-all.js"></script>
9 <script type="type/javascript" login.js"></script>
10
11 </head>
12 <body>
13
14
15 </body>
16 </html>
Step2: In login.js file this we will be inserted our forms and ajax. Cool.2 <head>
3 <title>Easydownload</title>
4
5 <link rel="stylesheet" href="ext-3.3/resources/css/ext-all.css" />
6
7 <script type="type/javascript" src="ext-3.3/adapter/ext/ext-base.js"></script>
8 <script type="type/javascript" src="ext-3.3/ext-all.js"></script>
9 <script type="type/javascript" login.js"></script>
10
11 </head>
12 <body>
13
14
15 </body>
16 </html>
1 var loginwindow = new Ext.window({
2 layout: 'fit',
3 id:'loginwindow',
4 width: 520,
5 autoheight: true,
6 draggable: false,
7 title: '',
8 resizable: false,
9 items: [regForm],
10 closable: false,
11 modal: true,
12 });
13 loginwindow.show(Ext.getBody());
14 loginwindow.afterRender(Ext.getCmp('username').focus(true,500));
15 });
16
17
18 var username = new Ext.Form.TextField({
19 allowBlank: false,
20 fieldLabel:'Username',
21 msgTarget: 'side',
22 blankText: 'Enter Username',
23 id:'username',
24 name:'username',
25 });
26
27 var password = new Ext.Form.TextField({
28 allowBlank: false,
29 fieldLabel:'Password',
30 blankText: 'Enter Password',
31 msgTarget: 'side',
32 id:'password',
33 name:'password',
34 });
and the ajax request will responsible to submit the form and getting the value of the textfield ajax will pass the value to php and insert into the databse.
2 layout: 'fit',
3 id:'loginwindow',
4 width: 520,
5 autoheight: true,
6 draggable: false,
7 title: '',
8 resizable: false,
9 items: [regForm],
10 closable: false,
11 modal: true,
12 });
13 loginwindow.show(Ext.getBody());
14 loginwindow.afterRender(Ext.getCmp('username').focus(true,500));
15 });
16
17
18 var username = new Ext.Form.TextField({
19 allowBlank: false,
20 fieldLabel:'Username',
21 msgTarget: 'side',
22 blankText: 'Enter Username',
23 id:'username',
24 name:'username',
25 });
26
27 var password = new Ext.Form.TextField({
28 allowBlank: false,
29 fieldLabel:'Password',
30 blankText: 'Enter Password',
31 msgTarget: 'side',
32 id:'password',
33 name:'password',
34 });
and the ajax request will responsible to submit the form and getting the value of the textfield ajax will pass the value to php and insert into the databse.
1 Ext.Ajax.request({
2 method: 'POST',
3 url: 'scripts/ajax/login.php',
4 params: {u:username.getValue(),p:password.getValue()},
5 success: function(result){
6 var response = Ext.util.JSON.decode(result.responseText);
7
8 if(!response.success){
9 Ext.messageBox.show({
10 title: 'TIMS',
11 msg:'',
12 buttons: Ext.messageBox.OK,
13 icon: Ext.messageBox.warning,
14 animEl: 'regForm_id',
15 });
16 }else{
17 window.location = response.page.redirect;
18 }
2 method: 'POST',
3 url: 'scripts/ajax/login.php',
4 params: {u:username.getValue(),p:password.getValue()},
5 success: function(result){
6 var response = Ext.util.JSON.decode(result.responseText);
7
8 if(!response.success){
9 Ext.messageBox.show({
10 title: 'TIMS',
11 msg:'',
12 buttons: Ext.messageBox.OK,
13 icon: Ext.messageBox.warning,
14 animEl: 'regForm_id',
15 });
16 }else{
17 window.location = response.page.redirect;
18 }
No comments:
Post a Comment