# Need help with Sencha Touch!!



## masterkd (Mar 13, 2012)

Any Sencha Touch developer here?? Need lots of help..like books to follow(I know there are only a few)..available online tutorial..I'm getting stuck at every step!!


----------



## RCuber (Mar 13, 2012)

masterkd said:


> Any Sencha Touch developer here?? Need lots of help..like books to follow(I know there are only a few)..available online tutorial..I'm getting stuck at every step!!



I am a Sencha ExtJS developer, its very similar to Sencha Touch. where are you getting stuck?


----------



## masterkd (Mar 13, 2012)

Thanks for the reply..ya, I also found that Sencha ExtJS is very similar to Sencha Touch..Actually I'm stuck when I need to receive some server side response..
Like I'm trying to create a simple login form..if the username is "f" then it'll show me an alert that login successful..that username validation is done in a jsp..i can see my control is going to the jsp file..but no alert is shown!!

*index.html*

```
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sencha Touch Login</title>
<script src="lib/sencha-touch.js" type="text/javascript"></script> 
<link href="lib/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="login.js" type="text/javascript"></script> 
</head>
<body>

</body>
</html>
```

*login.js*

```
Ext.setup({
	onReady: function() {
		var form;
		var formBase = {
				scroll: 'vertical',
				url: 'login1.jsp',
				standardSubmit: false,

				items: [{
					xtype: 'fieldset',
					title: 'Personal Info',
					instructions: 'Please fill in the details.',

					defaults: {
						required: true,
						labelAlign: 'left',
						labelWidth: '40%'
					},

					items: [
					        {
					        	xtype: 'textfield',
					        	name : 'username',
					        	label: 'Username',
					        	useClearIcon: true,
					        	autoCapitalize : false
					        },
					        {
					        	xtype: 'passwordfield',
					        	name : 'password',
					        	label: 'Password',
					        	useClearIcon: true
					        }
					        ]
				}
				],


				dockedItems: [
				              {
				            	  xtype: 'toolbar',
				            	  dock: 'bottom',

				            	  items: [
				            	          {
				            	        	  text: 'Reset',
				            	        	  handler: function() {
				            	        		  form.reset();
				            	        	  }
				            	          },
				            	          {
				            	        	  text: 'Save',
				            	        	  ui: 'confirm',
				            	        	  handler:function(){ 
				            	        		  form.submit({ 
				            	        			  method:'POST', 
				            	        			  waitTitle:'Connecting', 
				      		                        waitMsg:'Sending data...',

				            	        			  success:function(){
				            	        				  Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				            	        					  if (btn == 'ok'){
				            	        						  /*var redirect = '*www.google.com'; 
				            	        						  window.location = redirect;*/
				            	        					  }
				            	        				  });
				            	        			  },



				            	        			  failure:function(form, action){ 
				            	        				  if(action.failureType == 'server'){ 
				            	        					  obj = Ext.util.JSON.decode(action.response.responseText); 
				            	        					  Ext.Msg.alert('Login Failed!', obj.errors.reason); 
				            	        				  }else{ 
				            	        					  Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
				            	        				  } 
				            	        				  form.reset(); 
				            	        			  } 
				            	        		  }); 
				            	        	  }

				            	          }
				            	          ]
				              }
				              ]


		};
		if (Ext.is.Phone) {
			formBase.fullscreen = true;
		} else {
			Ext.apply(formBase, {
				autoRender: true,
				floating: true,
				modal: true,
				centered: true,
				hideOnMaskTap: false,
				height: 385,
				width: 480
			});
		}

		form = new Ext.form.FormPanel(formBase);
		form.show();
	}
});
```

*login.jsp*

```
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "*www.w3.org/TR/html4/loose.dtd">
<%
System.out.println("inside login.jsp");
String result;
	String loginUsername = request.getParameter("username");
	System.out.println("inside login.jsp1"+loginUsername);
	if (null != loginUsername && loginUsername.length() > 0) {
		System.out.println("inside login.jsp2"+loginUsername);
		if (loginUsername.equals("f")){
			result = "{success:true}";
			System.out.println("inside login.jsp3"+loginUsername);
			
		}else{
			System.out.println("inside login.jsp4"+loginUsername);
			result = "{success:false,errors:{reason:'Login failed.Try again'}}";
 
		}} else {
			System.out.println("inside login.jsp5"+loginUsername);
		result = "{success:false,errors:{reason:'Login failed.Try again'}}";
	}
	System.out.println(result);
%>
<%=result  %>
```


----------



## RCuber (Mar 13, 2012)

I think there is a problem with handler. check using listener instead of handler. I am currently busy at work , will check it out in the evening . 


```
text: 'Save',
ui: 'confirm',
handler:function(){ 
form.submit({ 
method:'POST', 
waitTitle:'Connecting', 
waitMsg:'Sending data...',
success:function(){
      Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
	if (btn == 'ok'){
	/*var redirect = '*www.google.com'; 
	window.location = redirect;*/
	}
	});
	},
```


----------



## masterkd (Mar 14, 2012)

Tried listener but couldn't make it work..do i need write the actions that will happen on submit inside listener..by the way i have seen examples console.log inside listener..where it is logging actually??

I tried this whole thing in ExtJS and more or less that's working but cannot make it work in Sencha Touch..any ideas??


----------



## RCuber (Mar 14, 2012)

masterkd said:


> I tried this whole thing in ExtJS and more or les that's working but cannot make it work in Sencha Touch..any ideas??


Not sure, will get back to you in the morning.
EDIT: are you using Sencha Touch 1 or 2?


----------



## masterkd (Mar 14, 2012)

sencha touch 1.1..will migrate to 2.0 when i get the basics!!


----------

