Extjs5: Form submit wrong callback - forms

I'am trying to get callback after submitting an Extjs5 Form (edit task)
The task is well updated and the server return a Successfull result but when I try to get the feedback of the submit action, it returns failure
Extjs Form
Ext.create("Ext.form.Panel", {
layout: "anchor",
reference: 'editTaskForm',
jsonSubmit: true,
url: "tasks/tasks/edit",
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Task Name',
name: 'taskID',
value: me.taskObject.get("taskID"),
hidden: true
},
{
fieldLabel: 'Task Name',
name: 'taskName',
value: me.taskObject.get("taskName"),
allowBlank: false
},
{
fieldLabel: 'Task priority',
name: 'taskPriority',
value: me.taskObject.get("taskPriority"),
allowBlank: false
},
{
fieldLabel: 'Task status',
name: 'taskStatus',
value: me.taskObject.get("taskStatus"),
allowBlank: false
},
{
xtype: 'textarea',
fieldLabel: 'Task Description',
name: 'taskDescription',
value: me.taskObject.get("taskDescription"),
allowBlank: false
}
],
buttons: [
{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: true,
disabled: true,
handler: "onTaskCreateOrUpdate"
}
]
})
Submit function
form.submit({
success: function (form, action) {
var result = action.result;
console.dir(result);
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
No error in the Javascript console and in the Server console
Can you help me Please??
Thank you

The server response needs to be something like:
{ success: true }
Here's a fiddle that shows this working:
https://fiddle.sencha.com/#fiddle/fc6
If you put some logging in your failure handler you should see that it's being called...

Related

ExtJS 7.2.0 - Form submit not working in Chrome

I'm trying to upload a file using the code below:
window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
bodyPadding: '20 10',
title: 'Upload file',
autoDestroy: true,
hidden: true,
modal: true,
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
uploadForm = new Ext.form.Panel({
items: [
file = new Ext.form.field.File({
xtype: 'filefield',
name: 'fileName',
fieldLabel: 'File',
allowBlank: false,
buttonText: 'Select file...',
})
]
})
],
buttons: [{
text: 'Cancel',
handler: function () {
upload.hide();
}
},
{
text: 'Upload',
handler: function () {
var form = uploadForm.getForm();
if (form.isValid()) {
form.submit({
url: 'upload',
waitMsg: 'Uploading your file...',
scope: this,
success: function (form, action) {
upload.close();
var json = JSON.parse(action.response.responseText);
if (json.success) {
Ext.Msg.alert('Success', json.message);
} else {
Ext.Msg.alert('Error', json.message);
}
},
failure: function (form, action) {
upload.close();
try {
var json = JSON.parse(action.response.responseText);
Ext.create('Ext.window.MessageBox').show({
title: 'Failure',
msg: json.message
});
} catch (err) {
Ext.create('Ext.window.MessageBox')
.alert('Failure', 'Failed to parse response');
}
}
});
}
}
}]
});
The code is working in firefox and opera and I get the response successfully, but in chrome on inspect network activity, the status is canceled and in the console I get the warning: Resource interpreted as Document but transferred with MIME type application/json. Therefore, the submit always returns failure, even though the file is uploaded. Can anyone please suggest how to fix this?

Form submission in ExtJs 6

I have a form, that I submit with success and failure callbacks:
The view:
Ext.define('App.view.CommentForm', {
extend: 'Ext.form.Panel',
alias: 'widget.ship-commentForm',
url: 'addcomment.php',
items: [{
xtype: 'textarea',
fieldLabel: 'Comment',
name: 'text',
allowBlank: false,
maxLength: 1000
},{
xtype: 'textfield',
fieldLabel: 'User name',
name: 'username',
readOnly: true
}],
fbar: [{
text: 'Save',
formBind: true,
itemId: 'submit'
}]
})
And the controller:
Ext.define('App.controller.MyController', {
init: function(){
this.control({
'ship-commentForm button#submit': {click: this.onFormSubmit},
...
onFormSubmit: function(btn){
var form = btn.up('form').getForm(),
me = this,
values = form.getValues();
form.submit({
success: function(form, action){
console.log('success')
},
failure: function(form, action){
console.log('failure')
}
})
setTimeout(function(){btn.up('window').close()}, 100)
},
While this worked great in ExtJs4, in ExtJs6, the form submits as it should, but the success and failure callbacks are no longer called. This should still work according to the documentation of submit().
N.B. The server responds contains a valid JSON string:
{"success":true,"msg":"Comment saved"}
Edit: I just added the code in the controller that I suspect being the issue:
setTimeout(btn.up('window').close(), 100)
Instead of closing your window with a setTimeout, make it in your success callback of the form.submit(). It should solve your problem.
form.submit({
success: function(form, action){
btn.up('window').close()
},
failure: function(form, action){
console.log('failure')
}
})

ExtJS form sended twice

I have a form with search (filtering) fields like this:
xtype: 'form',
id: 'searchPanel',
title: 'Search',
collapsible: true,
bodyPadding: 10,
height: 210,
buttonAlign: 'left',
defaults: {
width: 400,
labelWidth: 120,
allowBlank: true,
enableKeyEvents: true
},
layout: {
type: 'table',
columns: 2
},
items: [
{
xtype: 'textfield',
name: 'txtFltrSiteName',
fieldLabel: 'Site name or alias',
id: 'txtFltrSiteName'
},
{
xtype: 'textfield',
name: 'txtMonthTraffic',
fieldLabel: 'Month traffic',
id: 'txtMonthTraffic',
style: 'margin-left: 100px;'
},
{
xtype: 'combo',
id: 'ddlFltrPM',
name: 'ddlFltrPM',
fieldLabel: 'Project manager',
displayField: 'display_name',
valueField: 'user_id',
editable: false,
store: new storeOfUsers({ filters: [{ property: 'user_group_code', value: 'projectmanager', exactMatch: true }] })
},
// and many other fields below
But when i click on search button, i have two post request. One - with filter in it, second is without.
My code for send button action:
xtype: 'button',
id: 'btn_srch_set',
text: 'Searh',
margin: '10 7 0 0',
width: '',
handler: function() {
var filters = new Array();
var site_name = Ext.getCmp('txtFltrSiteName').getValue();
if(site_name.length > 0)
filters.push({dataIndex: 'site_name', type: 'string', value: site_name});
var project_name = Ext.getCmp('txtFltrProjectName').getValue();
if(project_name.length > 0)
filters.push({dataIndex: 'project_name', type: 'string', value: project_name});
var pm = Ext.getCmp('ddlFltrPM').getValue();
if(pm && pm > 0)
filters.push({dataIndex: 'project_manager_id', type: 'int', value: {'eq':pm}});
// many other fields
listOfSites.filters.removeAll();
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
listOfSites.store.load();
}
P.S.
When I overwrite in search button handler function this line:
filters.push({dataIndex: 'project_manager_id', type: 'string', value: pm});
Evrything is ok and there is only one request, so problem might be here. But i'm stuck and have no idea why it works such way.
Thanks for any help,
Stanislav.
UPD*
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: true, // json encode the filter query
local: false,
filters: [{
type: 'string',
dataIndex: 'site_name'
}, {
type: 'date',
dataIndex: 'startdate'
}, {
type: 'string',
dataIndex: 'project_name'
// more fields below
Try following
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
else
listOfSites.store.load();
addFilters() may already call sync()

Can't login to a web application through sencha app on clicking 'Sign in' button

This is my view
Ext.define("TimeSheet.view.Tracktime", {
extend: "Ext.form.Panel",
requires: ["Ext.form.FieldSet", "Ext.field.Text", "Ext.Button","Ext.Label", "Ext.field.Email", "Ext.field.Password","Ext.MessageBox", "Ext.Img"],
alias: "widget.tracktimeview",
config:{
id: 'entrypage',
fullscreen: true,
url: 'timesheet.ajatus.in/check.php',
//standardSubmit: false,
method: 'GET',
layout: {
centered: true,
},
defaults: {
styleHtmlContent: true,
//cls: 'backfield'
},
cls: 'panelBackground',
items: [{
xtype: 'fieldset',
id: 'loginfield',
autoComplete: true,
scrollable: false,
cls: 'formfield',
items: [{
xtype: 'image',
src: 'tracktime.png',
height: '60px',
cls: 'track'
},
{
xtype: 'textfield',
name : 'name',
label: 'tracktime/'
},
{
xtype: 'textfield',
name : 'uname',
allowBlank:false,
placeHolder: "User name"
},
{
xtype: 'passwordfield',
name : 'password',
allowBlank:false,
placeHolder: 'Password'
}
]
},{
xtype: 'button',
id: 'loginbtn',
cls: 'enter',
text: 'Sign in',
ui: 'confirm',
height: "50px",
}],
control: ({
'#loginbtn': {
tap: function() {
}
}
}),
},});
THIS IS CONTROLLER
Ext.define("TimeSheet.controller.Track", {
extend: "Ext.app.Controller",
config: {
refs: {
trackTimeView: "tracktimeview",
selector: '#tracktimeview',
addentryView: "addentryview",
selector: '#addentryview',
entryPage: '#entrypage',
loginBtn: '#loginbtn'
},
control:{
loginBtn: {
tap: "onLoginBtn"
},
onloginbtn: {
tap: function(btn) {
var form = Ext.getCmp('entry');
//var values = entry.getValues();
entry.submit({
method:'POST',
url: 'xxxxxxxx/check.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);
}
});
}
},
}
},
onLoginBtn: function() {
console.log("onLoginBtn");
var values = TimeSheet.views.tracktimeview.entrypage.getValues();
TryLogin(values['uname'], values['password']);
},
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}});

Sencha touch How to combine filters

i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.
the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel
following is the code for filters.js
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
ui: 'green',
cls: 'x-toolbar-dark',
baseCls: 'x-toolbar',
initComponent: function() {
this.addEvents('filter');
this.enableBubble('filter');
var form;
var showForm = function(btn, event) {
form = new Ext.form.FormPanel(formBase);
form.showBy(btn);
form.show();
};
Ext.apply(this, {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
layout: {
type: 'hbox',
align: 'center'
},
items: [
{
xtype: 'button',
iconCls:'info',
title:'info',
iconMask:true,
ui:'plain',
},{
xtype: 'spacer'
},/*{
xtype: 'selectfield',
name: 'search',
prependText: 'Search:',
options: [
{text: 'Location', value: 'location'},
{text: 'Theme', value: 'theme'},
]
},*/{
xtype: 'searchfield',
name: 'q',
placeholder: 'Search',
value: 'Destination or ID',
listeners : {
change: this.onFieldChange,
keyup: function(field, e) {
var key = e.browserEvent.keyCode;
// blur field when user presses enter/search which will trigger a change if necessary.
if (key === 13) {
field.blur();
}
},
scope : this
}
},{
xtype: 'selectfield',
name : 'sort_by',
prependText: 'sort_by:',
ui:'button',
cls:'sortbox',
options: [
{text: 'Sort By', value: ''},
{text: 'Newest', value: 'modified'},
{text: 'Sleeps', value: 'sleep_max'},
{text: 'Sleeps Desc', value: 'sleep_max DESC'},
{text: 'Bedrooms', value: 'bedroom'},
{text: 'Bedrooms Desc', value: 'bedroom DESC'},
// {text: 'Rates', value: 'rates'},
]
},{
xtype: 'button',
text: 'Filters',
handler: showForm
}
]
});
kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
//for filters form
var formBase = {
scroll: 'vertical',
//url :
standardSubmit : true,
items: [{
xtype: 'fieldset',
title: 'Filters',
instructions: 'Please enter the information above.',
defaults: {
//required: true,
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'spinnerfield',
name : 'sleep_max',
label: 'Sleeps',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'bedroom',
label: 'Bedrooms',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'rates',
label: 'Rates',
minValue: 50,
maxValue:5000,
incrementValue: 100,
cycle: false
},/*{
xtype: 'datepickerfield',
name : 'checkIn',
label: 'Check In',
destroyPickerOnHide: true,
},{
xtype: 'datepickerfield',
name : 'checkOut',
label: 'Check Out',
destroyPickerOnHide: true,
},*/{
xtype: 'selectfield',
name : 'themes',
label: 'Themes',
options: [
{text: 'Themes', value: ''},
{text: 'Skiing', value: 'skiing'},
{text: 'Golf', value: 'golf'},
{text: 'Beaches', value: 'beaches'},
{text: 'Adventure', value: 'adventure'},
{text: 'Family', value: 'family'},
{text: 'Fishing', value: 'fishing'},
{text: 'Boating', value: 'boating'},
{text: 'Historic', value: 'historic'},
{text: 'Biking', value: 'biking'},
]
},/*{
xtype: 'hiddenfield',
name : 'secret',
value: 'false'
},*/]
}],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
console.log(form);
console.log(result);
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Cancel',
handler: function() {
form.hide();
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Apply',
ui: 'confirm',
handler: function() {
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: false,
hideOnMaskTap: false,
height: 300,
width: 420,
});
}
},
/**
* This is called whenever any of the fields in the form are changed. It simply collects all of the
* values of the fields and fires the custom 'filter' event.
*/
onFieldChange : function(comp, value) {
//console.log(comp); console.log(value);
this.fireEvent('filter', this.getValues(), this);
}
});
Ext.reg('loanFilter', kiva.views.LoanFilter);
Its not clear what do you mean under "filters doesn't work".
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating
Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase
var formBase = {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
...