I'm submitting a form, but magically my form values don't get posted.
The onBeforeSubmit fires with the expected values and I can even do this.getValues() just before this.submit()
MyForm= function(config){
if ( typeof config !== 'object' ) {
config.url='test.php';
// config.standardSubmit = true;
config.items= [{
xtype: 'fieldset',
title: 'Login Details',
instructions: 'Please enter the information above.',
defaults: {
required: true,'
},
items: [{
xtype: 'textfield',
name : 'username'
}, {
xtype: 'passwordfield',
name : 'password'
}]
}];
var tbarBottom = {
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Login',
ui: 'confirm',
handler: function() {
this.onLoginClick();
},
scope: this
}]
};
config.listeners= {
beforesubmit: function(formpanel, values, options) {
console.log(values);//yup they are there
},
scope:this
}
config.dockedItems= [tbarBottom];
MyForm.superclass.constructor.call(this,config);
};
Ext.extend( MyForm, Ext.form.FormPanel,{
onResetClick: function() {
this.reset()
},
onLoginClick: function() {
console.log(this.getValues());//yup they are there
this.submit()
}
});
TL;DR This submits to the server, but I have no values being posted, do you have any idea why?
As per http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Request-cfg-method the default for method is GET, it should be changed to POST in the config obj. (Eg config.method='POST') and off you go
Related
I have one tab where the user must enter information and I want to validate the data when the user tries to change tabs. I'll prompt the user to verify that he wants to leave if the data input is incomplete.
I added the listener activeitemchange: on the tab panel, and I can prompt the user. However, it seems that Ext.Msg doesn't block the method call and I always "return true" from activeitemchange.
How can I change the code so the tab is only changed if the user clicks 'yes'?
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: "Sencha",
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
tabBarPosition: 'bottom',
listeners: {
activeitemchange: function (me, value, oldValue, eOpts) {
console.log("activeitemchange");
var oldTabIdx = me.getInnerItems().indexOf(oldValue);
var newTabIdx = me.getInnerItems().indexOf(me.getActiveItem());
console.log(oldTabIdx + " => " + newTabIdx);
if (oldTabIdx == 2) {
// me.getTabBar().setActiveItem(2);
Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
console.log(response);
if (response === 'no') {
console.log("User says stay.");
return false;
} else {
console.log("User says leave.");
return true;
}
});
}
// Always returns true because Ext.Msg.confirm doesn't block
return true; // false prevents tab change
}
},
items: [
{
id: 'tab1',
title: 'Home',
layout: 'fit',
xtype: 'container',
iconCls: 'home',
items: [
{html: 'page #1'}
]
},
{
id: 'tab2',
title: 'Two',
layout: 'fit',
xtype: 'container',
iconCls: 'star',
items: [
{html: 'page #2'}
]
},
{
id: 'tab3',
title: 'three',
layout: 'fit',
xtype: 'container',
iconCls: 'team',
items: [
{html: 'page #3'}
]
}
]
});
Ext.Viewport.add(tabPanel);
}
});
Attempted fix:
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: "Sencha",
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
tabBarPosition: 'bottom',
confirm: true,
listeners: {
activeitemchange: {
order: 'before',
fn: function (list, value, oldValue, eOpts) {
var me = this;
console.log(me.getConfirm()); // ERROR: getConfirm() is undefined
var oldTabIdx = me.getInnerItems().indexOf(oldValue);
var newTabIdx = me.getInnerItems().indexOf(value);
console.log(oldTabIdx + " => " + newTabIdx);
if (oldTabIdx == 2 && me.getConfirm()) {
Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
console.log(response);
if (response === 'no') {
console.log("User says stay.");
} else {
console.log("User says leave.");
me.setConfirm(false);
me.setActiveItem(newTabIdx);
}
});
return false;
} else {
me.setConfirm(true);
}
}
}
},
items: [
{
id: 'tab1',
title: 'Home',
layout: 'fit',
xtype: 'container',
iconCls: 'home',
items: [
{html: 'page #1'}
]
},
{
id: 'tab2',
title: 'Two',
layout: 'fit',
xtype: 'container',
iconCls: 'star',
items: [
{html: 'page #2'}
]
},
{
id: 'tab3',
title: 'three',
layout: 'fit',
xtype: 'container',
iconCls: 'team',
items: [
{html: 'page #3'}
]
}
]
});
Ext.Viewport.add(tabPanel);
}
});
The problem is because Ext.Msg.confirm() is an asynchronous method. It opens a different thread so the listener continues with its normal execution no matter less what is happening on the child thread.
Only way I see is to fire setActiveItem() in the 'yes' callback.
Aditionally, to avoid a confirm loop I added a flag:
Ext.application({
name: "Sencha",
requires: [
'Sencha.MyPanel',
'Ext.MessageBox'
],
launch: function () {
var tabPanel = Ext.create('Sencha.MyPanel');
Ext.Viewport.add(tabPanel);
}
});
Ext.define('Sencha.MyPanel', {
extend: 'Ext.tab.Panel',
config: {
layout: 'card',
tabBarPosition: 'bottom',
confirm: true,
listeners: {
activeitemchange: {
order: 'before',
fn: function (list, value, oldValue, eOpts) {
var me = this;
console.log(me.getConfirm()); // ERROR: getConfirm() is undefined
var oldTabIdx = me.getInnerItems().indexOf(oldValue);
var newTabIdx = me.getInnerItems().indexOf(value);
console.log(oldTabIdx + " => " + newTabIdx);
if (oldTabIdx == 2 && me.getConfirm()) {
Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
console.log(response);
if (response === 'no') {
console.log("User says stay.");
} else {
console.log("User says leave.");
me.setConfirm(false);
me.setActiveItem(newTabIdx);
}
});
return false;
} else {
me.setConfirm(true);
}
}
}
},
items: [
{
id: 'tab1',
title: 'Home',
layout: 'fit',
xtype: 'container',
iconCls: 'home',
items: [
{html: 'page #1'}
]
}, {
id: 'tab2',
title: 'Two',
layout: 'fit',
xtype: 'container',
iconCls: 'star',
items: [
{html: 'page #2'}
]
}, {
id: 'tab3',
title: 'three',
layout: 'fit',
xtype: 'container',
iconCls: 'team',
items: [
{html: 'page #3'}
]
}
]
}
});
Hope it helps-
I want to store the login form details in the database .for that,i wrote the following code .
In my view code
Ext.define('SampleForm.view.LoginForm', {
extend: 'Ext.form.Panel',
//id:'loginform',
requires:[
'Ext.field.Email',
'Ext.field.Password'
],
config: {
fullscreen: true,
layout:{
type:'vbox'
},
items: [
{
xtype: 'fieldset',
title: 'Login',
id: 'loginform',
items: [
{
xtype:'textfield',
label:'Name',
name:'name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
{
xtype: 'button',
width: '30%',
text: 'Login',
ui: 'confirm',
action:'btnSubmitLogin'
}
]
}
});
In controller
Ext.define("SampleForm.controller.LoginForm", {
extend: "Ext.app.Controller",
config: {
view: 'SampleForm.view.LoginForm',
refs: [
{
loginForm: '#loginform',
Selector: '#loginform'
}
],
control: {
'button[action=btnSubmitLogin]': {
tap: "onSubmitLogin"
}
}
},
onSubmitLogin: function () {
alert('Form Submitted successfully');
console.log("test");
var values = this.getloginform();
/* Ext.Ajax.request({
url: 'http://www.servername.com/login.php',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
}
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});*/
form.submit({
url:"http://localhost/sencha2011/form/login.php"
});
},
launch: function () {
this.callParent();
console.log("LoginForm launch");
},
init: function () {
this.callParent();
console.log("LoginForm init");
}
});
when i click the submit button,alert message coming,but values aren't stored in the database.and in console im getting this error,Uncaught TypeError: Object [object Object] has no method 'getloginform'.
Can anyone help me to how to insert the values in the db.
Javascript is case-sensitive. From Sencha Touch docs:
These getter functions are generated based on the refs you define and
always follow the same format - 'get' followed by the capitalized ref
name.
To use the getter method for ref, loginForm, and to get the form values use:
var values = this.getLoginForm().getValues();
I am creating login system with Sencha Touch 2. I am getting an issue while submitting my form. It is not getting response data from server. Below is my code
Controller:
Ext.define("MyMobile.controller.LoginController", {
extend: "Ext.app.Controller",
views: ['LoginView'],
config: {
refs: {
loginForm: "#loginFormPanel"
},
control: {
'button[action=login]': {
tap: "authenticateUser"
}
}
},
authenticateUser: function (button) {
this.getLoginForm().submit({
url: 'login/authenticate',
method: 'POST',
success: function (form, result) {
debugger; //This block of code is not executing even after JSON response
var jsonoutput = Ext.decode(result); // json parsing
Ext.MessageBox.alert('Error', "Success");
},
failure: function (form, result) {//This block of code is not executing even after JSON response
Ext.MessageBox.alert('Error', "Invalid username/password");
}
});
}
});
View
Ext.define("MyMobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.mylogin",
id: 'loginFormPanel',
config: {
margin: '0 auto',
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'Login',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
xtype: 'textfield',
label: 'User Name',
name: 'my-username',
required: true,
placeHolder: 'Username'
},
{
xtype: 'emailfield',
label: 'Email',
name: 'Email'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'my-password',
required: true,
placeHolder: 'Password'
}
]
},
{
xtype: 'button',
id: 'loginButton',
margin: '25 auto 0 auto ',
style: '',
maxWidth: 200,
ui: 'action',
width: '',
iconCls: 'user',
iconMask: true,
text: 'Login',
action: 'login'
}
]
}
});
App.JS
Ext.application({
name: "MyMobile",
appFolder: "myapp",
controllers: ["LoginController"],
views: ['LoginView'],
launch: function () {
var loginPanel= Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'mylogin'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
Can some one could figure out what should be the problem?
Below was the JSON response i am getting from server.
{"UserName":"Murali","isAdmin":true,"isAuthenticated":true}
Even after getting a JSON and 200 ok result, my code form submit function goes into failure callback. In failure call back function failure:function(form,result) i am getting result param as my JSON. But why it is in failure?
Make your server return a JSON response like below:
If success:
{
"success":true,
"UserName":"Murali",
"isAdmin":true,
"isAuthenticated":true
}
If failure:
{
"success":false
}
Read more here: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-submit
I am very new to sencha-touch & started to build simple Login form.
My UI is ready but now I am stuck on how to write code for login request response.
As important, how can I point to specific url to make POST/GET request?
Also how to get & parse the json data.?
I read the sench-touch documentation but I didnt understood, how to use that model, store, proxy.
Suggestions upon how to create model, store, proxy to make simple login are very helpful.
Thanks in advance.
Edited to insert image:
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Username'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
loginForm.add({
xtype: 'button',
text: 'Login',
ui: 'confirm',
badgeText: '1',
// handler: function(){
// // alert("handler invoked");
// },
listeners : {
tap : function() {
var form = Ext.getCmp('form-id');
var values = form.getValues();
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
}
});
loginForm.add({
xtype: 'toolbar',
// id:'loginPressed',
docked: 'bottom',
// layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
// action: 'login',
handler: function() {
loginForm.setValues({
name: 'vs',
password: 'vs'
})
}
},
{
xtype: 'button',
text: 'Clear',
ui:'decline',
handler: function() {
loginForm.reset();
}
},
{
xtype: 'button',
centered: true,
text: 'Sign Up',
handler: function() {
alert('New User?');
}
},
{
xtype: 'container',
html: 'New User? ',
style: {
color: 'yellow',
}
},
]
});
Exemplo usando ajax request:
Example using ajax request:
Ext.Ajax.request({
url: domain.com/auth/signIn/',
method: 'post',
scope: this,
params: {
email: username,
password: password
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.meta.code==200)
{
/**
* Salvando dados do usuário em localStorage
* Save user data on localStorage
*/
window.localStorage.setItem('myID', result.response.id);
window.localStorage.setItem('email', result.response.email);
window.localStorage.setItem('token', result.response.token);
window.localStorage.setItem('fName', result.response.fName);
window.localStorage.setItem('lName', result.response.lName);
window.localStorage.setItem('photo', result.response.photo);
window.localStorage.setItem('gender', result.response.gender);
window.localStorage.setItem('relationship', result.response.relationship);
window.localStorage.setItem('interest', result.response.interest);
this.signInSuccess();
this.verifyDeviceToken(result.response.id, 'signin');
}
else
{
this.signInFailure('Error', 'The data reported are invalid');
}
},
failure: function (response) {
}
});
You are almost there!
add your code to the success callback.
Note, success() callback if fired if ajax returns ok, otherwise failure(). Callback callback() fire in both cases.
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
// for example
var result = Ext.decode(text); // json parsing
if (result.ok) {
//create new widget
var homeView = Ext.widget('homePage', {...});
Ext.Viewport.remove(formLogin);
Ext.Viewport.add(homeView);
///... etc
homeView.show()
}
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
Disclaimer. Of course the code is not tested...
cheers, Oleg
I am creating my first app with sencha touch.
I have a problem with form validation.
This is the form:
var form = new Ext.form.FormPanel({
title: 'Activity',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name : 'sector',
label: 'Sector',
required: true
},
{
xtype: 'selectfield',
name : 'city',
label: 'City',
options: [
{
text: '*',
value: '*'
},
{
text: 'First Option',
value: 'first'
},
{
text: 'Second Option',
value: 'second'
},
{
text: 'Third Option',
value: 'third'
}]
},
{
xtype: 'textfield',
name : 'nation',
label: 'Nation',
required: true
},
{
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Cerca',
handler: function() {
formSettori.submit({
url: 'book.php',
method: 'GET',
success: function() {
Ext.Msg.alert('OK');
},
failure: function() {
Ext.Msg.alert('NO');
}
});
}
},
{
xtype: 'button',
text: 'Reset',
handler: function() {
form.reset();
}
}]
}]
}]
});
the form has only three fields:
-activities
-city
-nation
all fields are required.
activities and the nation must not be empty, while the city should not be equal to *
how do I control the fields?
thank you!
There is not built in way to do form validation. You must do it yourself.
The easiest way is to use the private Ext.form.Panel method getFields to loop through each of the fields and ensure they are not empty.
var fields = form.getFields(),
field, name, isEmpty;
for (name in fields) {
field = fields[name];
isEmpty = (!field.getValue() || field.getValue() == "");
if (isEmpty) {
field.addCls('x-invalid');
} else {
field.removeCls('x-invalid');
}
}
If the field is empty, then we add the x-invalid class (so you can style it).