私は sencha touch 2 フレームワークを初めて使用します。ユーザーがログインして既存のレコードを追加、削除、更新できる単純な学生アプリケーションを作成しようとしています。MySQL db を使用してユーザーを検証したい。アプリケーションでユーザー名とパスワードを JSP ページに送信して検証を行い、検証が成功するとレコード全体をフェッチして次のページの sencha に表示するという問題がありますが、そうすることができません。Store を使用してデータをロードし、フィールドを db の列名と照合しています。パラメータ(ユーザー名とパスワード)をjspページに送信し、ログイン時に次のページにフェッチされたレコードを表示する方法を教えてください。
これが私のコードです:
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});
}
});
送信ボタンのクリックで Ext.Ajax.request を使用してみました。「response.responseText」として成功した関数は、jsp ページ全体を取得しています。jspページで送信された値を取得する方法を教えてください。また、sencha が jsp ページを呼び出したときに、jsp ページが実行され、クエリが実行され、結果が返される必要があります。以下は送信ボタンのコードと私のjspコードです。
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>