I Am new to sencha touch 2 framework, I am trying to create just a simple student application in which a user can Login and add, delete and update the existing records. i want to validate the user using MySQL db. I am having problem that, I want my application to send the username and password to my jsp page to validate and upon successful validation fetch the whole records to display on sencha on next page, not able to do so. I Am using Store to load the data and also matching the fields with the column names of db. Can anyone please help me in how can i send the parameters ( username and password ) to my jsp page and also display the fetched records on next page upon login.
Here is my code :
Model :-
Ext.define('MyApp.model.Login', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'userName',
type: 'string'
},
{
name: 'password',
type: 'string'
}
]
}
});
Store :-
Ext.define('MyApp.store.Login', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Login'
],
config: {
autoLoad: true,
model: 'MyApp.model.Login',
storeId: 'loginStore',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/StudentApplication/AddStudent.jsp?',
reader: {
type: 'json',
rootProperty: 'user'
}
}
},
});
View :-
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
stores : [ 'loginStore' ],
requires : ['MyApp.store.Login', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
config: {
items: [
{
xtype: 'panel',
centered: true,
height: 272,
items: [
{
xtype: 'textfield',
label: 'UserName',
itemId: 'user',
labelWidth: '50%',
required : true,
placeHolder: 'User'
},
{
xtype: 'textfield',
label: 'Password',
itemId: 'pass',
required : true,
labelWidth: '50%',
placeHolder: 'Password'
},
{
xtype: 'button',
centered: true,
id: 'Login',
itemId: 'mybutton',
ui: 'round',
width: '50%',
text: 'Login'
}
]
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, eOpts) {
Ext.Msg.alert("Hello All..");;
}
});
app.js :-
Ext.Loader.setConfig({
});
Ext.application({
views: [
'MyContainer'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyContainer', {fullscreen: true});
}
});
I tried you use the Ext.Ajax.request on submit button click. In success function as a 'response.responseText' am getting the whole jsp page. Can you please tell me how can i retrieve the submitted values in jsp page ? and also i want when sencha call my jsp page my jsp page should run and execute the query and return the result. below is the submit button code and my jsp code.
onTest_submitTap: function(button, e, eOpts) {
Ext.Msg.alert('Form Submit Clicked !!');
var values = this.getTest(); // This is my view 'App.view.Test'
console.log("Param ::" + values ); // I get the test object here
console.log("Values ::" + Ext.getCmp('test_name').getValue()); // here i get the value of name field in 'Test' View
Ext.Ajax.request({
values : values, // values from form fields..
url: 'http://localhost/jsp/TimeSheet/test_sencha.jsp',
success: function(response) {
console.log("Response is ::"+response.responseText); // Recieved the response as a whole jsp page
},
failure: function(response) {
console.log(response.responseText);
}
});
<%@page language="java" import="java.sql.*, java.util.*, java.lang.*, net.sf.json.*, org.json.simple.JSONObject,com.dipti.User" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/json; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection= DriverManager.getConnection("jdbc:mysql://localhost:3306/test_db?user=root&password=root");
Statement statement = connection.createStatement();
Boolean result = statement.execute("INSERT INTO `employee` (`id`, `Name`, `Age`) VALUES (3, 'sunny', '28');");
out.print(( " Result is :: " + result ));
}
catch (Exception exc)
{
out.print(exc.toString());
}
%>
</body>
</html>
I would use an Ext.Ajax request.
Your webservice should have an action for authentication which takes the user's credentials as parameters and then uses them to validate their account against the database. Then depending on the results of your query you will need to results for that action, success and error for example.
In success return the data you want to display, in error just return a 500 or whatever error's default code is...the content will not matter.
In your request then you will have a success and a failure function that will load the appropriate page, be it a list with the data or a page to try logging in again.
Good luck, Brad