ExtJs Form.submit() response does not have responses json body - json

I have form like
items: [{
xtype: 'form',
itemId: 'form',
bodyPadding: 5,
url: 'upload',
items: [{
xtype: 'fileuploadfield',
name: 'file',
fieldLabel: 'label',
emptyText: 'enter',
labelWidth: 60,
width: 590,
msgTarget: 'side',
allowBlank: false,
buttonText: 'browse'
}],
buttons: [
{
text: 'upload',
itemId: 'loadButton'
}]
}]
and click handler
onLoadBtn: function (button) {
var form = button.up('form').getForm(),
if (form.isValid()) {
form.submit({
scope: this,
submitEmptyText: false,
fileupload:true,
success: function (form, action) {
var response = Ext.JSON.decode(action.response.responseText, true);
if (response.success) {
Ext.Msg.show({
title: 'success',
msg: response.message,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
});
} else {
this.error(response.message);
}
},
failure: function (form, action) {
var response = Ext.JSON.decode(action.response.responseText, true);
this.error(response.message);
},
});
}
},
Endpoint from server side return response with json body
{"success" : "true", "message" : "Success"}
, but in browser network response body is empty.
Request have header
Accept : 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
If i change it to
Accept : 'application/json'
and resend request, i got a response with right json body.
Any ideas, what need to change in the form or handler, so that change the accept header?

Resolved. Responses body has been disabled by response header
X-Frame-Options: DENY
Thanks!

Related

JSONP request not working

Hi i'm new to Sencha and i'm try to set json request data to filedset. But it does not work. Please help me i cannot find the error.
this is my json request data:
{"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}}
And this is the code.
Ext.define('AIOS_vis.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
listeners: {
activate: function() {
alert('gr');
Ext.data.JsonP.request({
url: 'http://localhost:8080/mock/GetCtPwer.php',
method: 'POST'
callbackkey: 'callback',
params: {
tap_id: 1
},
scope: this, /// fix handler scope
callback: function (response, value, request) {
var wattComponent = Ext.getCmp('watt');
wattComponent.setValue(value.response.electric_power);
var ampereComponent = Ext.getCmp('ampere');
ampereComponent.setValue(value.response.electric_current);
},
failure: function (response, request) {
Ext.Msg.alert(response);
}
});
}
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Visual',
},
{
xtype: 'fieldset',
instructions: 'Last Update: 2014/02/06:12:45:23',
items: [
{
xtype: 'button',
text : 'current',
height: '40px',
},
{
xtype: 'textfield',
id: 'watt',
label: 'Wattage (W):',
text: '1890.9W'
}, {
xtype: 'textfield',
id: 'ampere',
label: 'Amperage (A):',
text: '18.91A'
}]
},
{
xtype :'titlebar',
style: 'background:#484848',
title : 'power</br>123.4Wh',
height: '100px'
}
]}
]
},
});
Change your webservice url to (for example) http://yoururl.com:8080/mock/GetCtPwer.php?jsonp=parseResponse
and make sure your webserice is responding this:
parseResponse({"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}})
you can change "parseResponse" to whatever you want.

ExtJS 4, Direct File upload in Chrome: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

I try to upload a file in "Google Chrome", with "ExtJS 4" and Direct form submit.
On every Way I try in chrome, I get the Error:
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
In Firefox it works without exeptions.
I searched allready in different forums, but not a single problem with this failure, give me single idea what I can use for my task.
Can somebody try to help me?
Ext.define('MyApp.view.DirectUpload', {
extend: 'Ext.form.Panel',
itemId: 'DirectUpload',
title: 'Direct Upload',
initComponent: function() {
var me = this;
me.initialConfig = Ext.apply({
paramOrder: [
'name',
'file'
]
}, me.initialConfig);
Ext.applyIf(me, {
paramOrder: [
'name',
'file'
],
items: [
{
xtype: 'textfield',
itemId: 'name',
fieldLabel: 'Label',
name: 'name'
},
{
xtype: 'filefield',
id: 'file',
itemId: 'file',
fieldLabel: 'Label',
name: 'file'
},
{
xtype: 'button',
handler: function(button, event) {
this.up('form').getForm().submit({
scope: this,
success: function(form, action)
{
console.log(action);
},
failure: function(form, action)
{
console.log(action);
}
});
},
text: 'MyButton'
}
]
});
me.processDirectUploadTest(me);
me.callParent(arguments);
},
processDirectUploadTest: function(config) {
config.api = {submit: 'RPC.fileupload.filterUploads'};
return config;
}
});

JSON response not assigned to textfield text

When i call the Method,JSON response not assigning to the textfield ,Here i mentioned through the id. But its not assigning to the text field text.
JSON response
Method
function viewgiftdetails(itemid,p,t) {
Ext.Ajax.request({
url : 'http://192.168.1.155:8181/WishList/ShowItemsByItemID/userID=3/itemID=19',
method: "GET",
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("Success", respObj[0].itemName);
Ext.getCmp('myitemname').setData(respObj[0].itemName)
Ext.getCmp('myitemdesc').setData(respObj[0].describe)
Ext.getCmp('myitemprice').setData(respObj[0].price)
},
failure: function (response) {
alert(response.responseText);
}
});
}
PANEL
var viewitemspnl = Ext.create('Ext.Panel', {
id: 'viewitemspnl',
scrollable:'vertical',
height: '100%',
width: '100%',
items: [{
xtype: 'toolbar',
ui:'light',
docked: 'top',
title: 'My items',
items: []
},
{
xtype: 'textfield',
name : 'itemName',
id:'myitemname',
label: 'Item Name',
useClearIcon: true
},
{
xtype: 'textfield',
name : 'itemdesc',
id:'myitemdesc',
label: 'Description',
useClearIcon: true
},
Whats wrong with my code?PLease help to solve this issue
I think it should not be
Ext.getCmp('myitemname').setData(respObj[0].itemName);
Because their is no any method setData() for the textfield.
Try this
Ext.getCmp('myitemname').setValue(respObj[0].itemName);

URL field not working with flexigrid no response from URL

When I pass the URL I am getting a no response from the url otherwise if I specify the corresponding WCF service page which is included in my project it is working is it any cross domain issue what would be the possible issue
<form id="sform" runat="server">
<table id="flex2" style="display:none"></table>
<script type="text/javascript">
$(document).ready(function () {
var user_id = 1;
var data = { UserID: user_id };
$("#flex2").flexigrid({
useInlineEditor: true,
//singleSelect: true,
rowClick: function (row) {
//var r=this.DataSource.rows[row.rowIndex];
//var p=$(row).offset();
//alert(r[this.DataSource.key]+" "+r.Name+" offset:"+p.top+","+p.left);
//this.grid.inlineEditor.edit(row);
},
url: 'http://192.168.10.91:5001/Service.svc/GetStates',
method: 'POST',
dataType: 'json',
colModel: [
{ display: 'Hours', name: 'hours', width: 40, sortable: true, align: 'center' },
{ display: 'DOC', name: 'doc', width: 180, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'Type', name: 'cmetype' }
],
onError: function (jqXHR, textStatus, errorThrown) {
alert("flexigrid failed " + errorThrown + jqXHR + textStatus);
},
sortname: "type",
sortorder: "asc",
usepager: true,
title: 'States',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 800,
height: 200
});
});
//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData() {
//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex2").flexOptions({ params: dt });
return true;
}
$('#sform').submit(function () {
$('#flex2').flexOptions({ newp: 1 }).flexReload();
return false;
});
</script>
</form>
Make sure that the svc service is accesibile and that it can accept post requests.
If all works well, check that the response is JSON and is valid.

ExtJS-Parsing json data and display in view

I am calling a rest webscript using Extjs with JSON,but unable to display on view.
The problem is i am getting the json data as response from the server.But when i want to display on view.Its not getting displayed.
here is my json:
{
"data":
{
"ticket":"TICKET_87c91dd9d18d7242e44ff638df01e0cb388ee4c7"
}
}
and here is extjs code:
Ext.onReady(function() {
alert("in login js");
var store = new Ext.data.JsonStore({
proxy : new Ext.data.ScriptTagProxy({
// url : 'http://ip:8080/alfresco/service/api/login',
url : 'http://ip:8080/alfresco/service/api/login?u=Value1&pw=Value2&format=json',
method : 'GET'
}),
reader : new Ext.data.JsonReader({
root : 'data',
fields : ['ticket']
})
});
alert("after the webscript call");
//store.load();
var grid = new Ext.grid.GridPanel({
renderTo: 'PagingFragment',
frame:true,
width:600,
height:800,
autoHeight: true,
autoWidth: true,
store: store,
loadMask:true,
columns: [
{
height:100,
width:100,
header: "Ticket",
dataIndex: 'ticket',
// renderer: title_img,
//id: 'ticket',
sortable: true
}
],
bbar: new Ext.PagingToolbar({
pageSize: 2,
store:store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}'
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: {
fn: function(sm,index,record) {
Ext.Msg.alert('You Selected',record.data.title);
}
}
}
})
});
store.load({
params: {
start: 0,
limit: 5
}
});
});
and in jsp:
<body>
<div id="PagingFragment" style="position:absolute;top:10px;left:200px">
</div>
</body>
could anybody help on this
'data' must be an array.
Instead of { data: { ticket: 'blahblahblah' } } you must return
{ data: [{ ticket: 'blahblahblah' }] } see the diference?