Develop Reference

Web service returning JSON but not rendering

I have a SharePoint web service that retrieves documents from a farm. The call is a successful 200 and when I open it I can validate the JSON fine.
However it is not rendering on the page. Instead throwing a:
SyntaxError: missing ; before statement[Learn More] getTopics:1:8
getTopics is part of the Visual studio wsp project which compiles, deploys, and successfully retrieves the data. Is there something I'm missing here?
Code
var title = 'List';
var gridHeight = 400;
var uniqueId = 'topics';
var url = '/_vti_bin/MetaDataDoc/MetaDoc.svc/getTopics/?folder=/general_documents/';
var dSort = 'modified';
var dSortOrder = 'DESC';
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder)
function buildGrid(divId, title, gridHeight, url, dSort, dSortOrder) {
Ext.define('gridModel', {
extend: 'Ext.data.Model',
fields: [
{ name: "name", mapping: "name", sortable: true, convert: Ext.util.Format.trim },
{ name: "upcase_name", mapping: "name", convert: Ext.util.Format.uppercase },
{ name: "upcase_desc", mapping: "para", convert: Ext.util.Format.uppercase },
{ name: "url", mapping: "url", sortable: true},
{ name: "modified", mapping: "date", sortable: true, type: "date", dateFormat: "n/j/Y g:i A" },
{ name: "type", mapping: "type", sortable: true },
{ name: "size", mapping: "size", sortable: true, type: 'int'},
{ name: "desc", mapping: "para" },
{ name: "doclist", mapping: "doclist", convert: nestedData },
{ name: "title", mapping: "title" }
]
});
function toggleDetails(btn, pressed) {
grid[divId].columns[1].renderer = pressed ? renderNameDetails : renderName;
grid[divId].columns[0].renderer = pressed ? renderTypeDetails : renderType;
grid[divId].getView().refresh();
}
var gridStore = Ext.create('Ext.data.Store', {
model: 'gridModel',
proxy: {
type: 'jsonp',
url: url,
reader: {
type: 'json',
record: 'doc',
root: 'doclist'
}
}
});
if (dSort) {
gridStore.sort(dSort, dSortOrder);
}
var searchField = new SearchField({ store: gridStore, width: 300 });
var toggleButton = new Ext.Button({
enableToggle: true,
border: true,
text: 'View Details',
toggleHandler: toggleDetails,
pressed: false
});
grid[divId] = Ext.create('Ext.grid.Panel', {
renderTo: divId,
store: gridStore,
enableColumnHide: false,
enableColumnMove : false,
height: gridHeight,
tbar: ['Filter: ', ' ', searchField, { xtype: 'tbfill' }, toggleButton],
columns: [
{text: 'Type', width: 50, dataIndex: 'type',renderer: renderType},
{text: 'Document Name', flex: 1, dataIndex: 'name', renderer: renderName},
{text: 'Modified', width: 90, dataIndex: 'modified', xtype:'datecolumn', format:'m/d/Y'}
]
});
var loadMask = new Ext.LoadMask(divId, {message: "Loading"});
gridStore.load();
}
getTopics from the web service
public content getTopics(string foldername)
{
content returnContent = new content();
returnContent = getDocs2(foldername);
return returnContent;
}

Add that missing semicolon here (line 8):
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder);

Grid not updating when new record is added to his store

I have a gridpanel who is not being updated when a record is inserted on his store.
Model:
Ext.define('S1.model.Ciot', {
extend: 'Ext.data.Model',
requires: 'S1.proxy.Ciot',
proxy: 'ciot',
associations: [
{
type: 'belongsTo',
model: 'S1.model.Person',
associatedName: 'owner',
primaryKey: 'id',
foreignKey: 'owner_id',
associationKey: 'owner',
setterName: 'setOwner',
getterName: 'getOwner'
}
],
fields: [
{name: 'id', type: 'int', useNull: true},
{name: "owner_id", type: 'int', useNull: true},
{name: "number", type: 'int', useNull: true},
{name: "status", type: 'int', useNull: true},
{name: "product", type: 'string', useNull: true}
]
});
Store:
Ext.define('S1.store.Ciot', {
autoLoad: true,
extend: 'Ext.data.Store',
requires: 'S1.proxy.Ciot',
model: 'S1.model.Ciot',
proxy: 'ciot',
remoteSort: true,
remoteFilter: true,
remoteGroup: true,
pageSize: 40
});
Controller:
Ext.define('S1.controller.Ciot', {
extend: 'Ext.app.Controller',
stores: [
'Ciot'
],
models: [
'Ciot'
],
views: [
'ciot.Window',
'ciot.Grid',
'ciot.EditWindow',
'ciot.Form'
],
init: function () {
var me = this;
me.control({
'ciotgrid button[name=new]': {
click: me.onNewButtonClick
},
'ciotgrid': {
itemdblclick: me.onGridItemDblClick
},
'ciotform button[name=save]': {
click: me.onButtonSaveClick
}
});
},
onNewButtonClick: function (bt) {
var record = Ext.create('S1.model.Ciot'),
grid = bt.up('grid');
this.openEditWindow(record, grid);
},
onGridItemDblClick: function (v, record) {
this.openEditWindow(record, v);
},
openEditWindow: function (record, grid) {
var w = Ext.create('S1.view.ciot.EditWindow');
w.setGrid(grid || null);
w.show();
w.down('form').loadRecord(record);
},
onButtonSaveClick: function (bt) {
var form = bt.up('form'),
record = form.getRecord();
if (!record) {
return false;
}
if (!form.getForm().isValid()) {
return false;
}
form.updateRecord();
record.save({
success: this.onSaveSuccess,
failure: this.onSaveFailure,
scope: form
});
},
onSaveSuccess: function (r, op) {
var w = this.up('cioteditwindow'),
grid = w.getGrid(),
rs = op.getResultSet();
grid.getStore().insert(0, rs.records[0]);
w.close();
},
onSaveFailure: function (record, op) {
// ...
}
});
The callback onSaveSuccess successfully add the new record to the grid, but nothing happens on the frontend.
The record returned from the backend is OK.
Looks like the grid that I am inserting the new record, is not the same grid rendered.
What am I doing wrong here?
Thank you.
ps: the code was shortened for demonstration purposes.

Try to refresh the grid:
onSaveSuccess: function (r, op) {
var w = this.up('cioteditwindow'),
grid = w.getGrid(),
rs = op.getResultSet();
grid.getStore().insert(0, rs.records[0]);
--> grid.getView().refresh();
w.close();
},

The problem was in my record.
There was a "record.getOwner()" in the grid column renderer and the owner property was not being set.
I don't know why that method was not returning an error.
Grid:
Ext.define('S1.view.ciot.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ciotgrid',
store: 'Ciot',
columns: [
{
header: 'Empresa',
dataIndex: 'owner_id',
renderer: function (v, md, record) {
var owner = record.getOwner();
if (owner instanceof S1.model.Person) {
v = owner.get('name');
}
return v;
},
flex: 1
},
{header: 'Número', dataIndex: 'number', flex: 1},
{header: 'CIOT', dataIndex: 'ciot', flex: 1},
{header: 'Produto', dataIndex: 'product', flex: 1},
{header: 'Status', dataIndex: 'status', flex: 1}
]
});

Sencha touch json saving in raw instead of data

I have the following JSON
{"pic":[{"id":"10","title":"Perro","descripcion":"Un lindo perrito","puntos":"300","ext":"jpeg","image_time":"2014-07-28 03:58:31","data":"","URL":"pug.jpeg"},{"id":"12","title":"Pugs","descripcion":"\u00danete a la fuerza","puntos":"123","ext":"jpeg","image_time":"2014-07-30 07:05:42","data":"","URL":"image.jpg"},{"id":"14","title":"burro","descripcion":"lindo burro","puntos":"678","ext":"png","image_time":"2014-07-30 16:25:44","data":"","URL":"1456105_475563429219279_7985916_n.png"}]}
And the following model:
Ext.define('hptest2.model.pic', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'URL', type: 'String'},
{name: 'puntos', type: 'int'},
{name: 'title', type: 'String'},
{name: 'descripcion', type: 'String'},
{name: 'data', type: 'String'},
{name: 'ext', type: 'String'},
{name: 'image_time', type: 'String'},
]
}
});
And its store:
Ext.define('hptest2.store.pic', {
extend: 'Ext.data.Store',
config: {
model: 'hptest2.model.pic',
proxy: {
type: 'ajax',
url: 'data/pic.php'
},
reader: {
type: 'json',
rootProperty: 'pic'
}
}
});
But when I use a tpl on a view... I just can't access the data from the store
View:
{
title: 'Promociones',
iconCls: 'star',
items: [
{
xtype: 'panel',
store : 'pic',
tpl:new Ext.XTemplate('<div>{URL} with {puntos}</div>'),
}
]
}
The data is stored in raw but not in data
At console with Ext.getStore('pic') in data -> all -> data ... all my columns from my model appear as follow:
data: Object
URL: null
data: null
descripcion: null
ext: null
id: "ext-record-6"
image_time: null
puntos: null
title: null
but in data -> all -> data -> raw I am able to visualise all data that I wished I could access through my view
pic: Array[3]
0: Object
URL: "pug.jpeg"
data: ""
descripcion: "Un lindo perrito"
ext: "jpeg"
id: "10"
image_time: "2014-07-28 03:58:31"
puntos: "300"
title: "Perro"
__proto__: Object
1: Object
2: Object

Extjs can't refresh the store of a grid

I have a problem when I'm trying to refresh the store of a grid inside a Extjs WindowsA from a Extjs WindowsB.. here's the code
There's a grid inside of my WindowsA with this store
var store_grid_egresos_fijos = Ext.create('Ext.data.Store', {
fields: [
{name: 'concepto_egreso.id', type: 'int'},
{name: 'tipo', type: 'string'},
{name: 'concepto_egreso.nombre', type: 'string'},
{name: 'monto', type: 'numeric'},
{name: 'fecha', type: 'date', dateFormat: 'Y-m-d'},
{name: 'referencia_documento_mercantil', type: 'string'},
{name: 'nro_factura', type: 'string'},
{name: 'cuenta.nombre', type: 'numeric'}
],
proxy: {
type: 'ajax',
url: '/egreso/egresos_by_date',
reader: {
type: 'json'
}
},
autoLoad: false
});
and here is the code for the grid inside my WindowsA.js:
{
xtype: 'gridpanel',
id:'egresosGridFijos',
store: store_grid_egresos_fijos,
features :{ftype:'summary'},
x: 10,
y: 50,
height: 310,
maxHeight: 310,
width: 350,
title: 'Gastos Fijos',
columns: [
{
xtype: 'gridcolumn',
width: 44,
dataIndex: 'concepto_egreso.id',
text: 'ID'
},
{
xtype: 'gridcolumn',
width: 219,
dataIndex: 'concepto_egreso.nombre',
text: 'Concepto'
},
{
xtype: 'numbercolumn',
width: 78,
text: 'Monto',
dataIndex: 'monto',
summaryType: 'sum',
summaryRenderer: function change(val){
total_fijos = val
return '<span style="color:green;">' + val + '</span>';
}
}
]
}
and here is the code where I try to update the store on the grid within the WindowsA.js (This code is inside WindowsB.js)
{
xtype: 'button',
id:'btn_registrar_obj_egreso',
x: 785,
y: 370,
width: 105,
glyph: 20,
cls: 'my-button',
scale: 'medium',
text: 'Registrar',
icon:'/images/grabar.png',
handler: function(){
Ext.Ajax.request({
url: '/egreso/registrar',
method: 'GET',
params: {
condominios_id: 01,
concepto_egreso_id: Ext.getCmp('txt_id').getValue(),
fecha : Ext.getCmp('dt_fecha').getValue(),
},
success: function( resultado, request ) {
datos=Ext.JSON.decode(resultado.responseText);
if (datos.success) {
var mes = Ext.getCmp('txt_mes').getValue()
var year = Ext.getCmp('txt_year').getValue()
var fecha = year+'-'+mes+'-'+'05'
Ext.getCmp('dt_fecha_consulta').setValue(fecha)
store_grid_egresos_fijos.load({
params : {
fecha : fecha,
tipo:'fijo'
},
autoLoad: true
});
Ext.Msg.show({
title:'SIACO',
msg: datos.msg
});
}
else {
Ext.Msg.alert("Error", datos.msg );
}
;
},
failure: function(response) {
alert("Error " + response.responseText);
}
})
}
}
With this code I'm trying to update the grid... reloading
store_grid_egresos_fijos.load({
params : {
fecha : fecha,
tipo:'fijo'
},
autoLoad: true
});

Try reloading your store this way
store_grid_egresos_fijos.baseParams.fecha = fecha;
store_grid_egresos_fijos.baseParams.tipo = 'fijo';
store_grid_egresos_fijos.reload();

Passing an array from EXTJS to PHP by URL

I have a checkbox grid panel in ExtJS which I want to post selected rows to a PHP function.
When an user click the button, the selected rows should be send to php then php get this rows by $_REQUEST as a parameter.
Could anybody point me right direction to post an array and decode in PHP?
The Model :
Ext.define('LabelModel', {
extend: 'Ext.data.Model',
fields:
[
{name: 'LABEL_ID', type: 'int'},
{name: 'STORE_NO', type: 'int'},
{name: 'DNR_NO', type: 'int'},
{name: 'DNR_DESCRIPTION', type: 'string'},
{name: 'DEPARTMENT', type: 'int'},
{name: 'ARTICLE_NO', type: 'int'},
{name: 'SUBSYS_ARTICLE_NO', type: 'int'},
{name: 'ARTICLE_DESCRIPTION', type: 'string'},
{name: 'ARTICLE_TYPE', convert: checkType},
{name: 'START_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'END_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'PRODUCT_PRICE', type: 'float'},
{name: 'UNIT_PRICE', type: 'float'},
{name: 'SHELF_PRICE', type: 'float'},
{name: 'LABEL_TEXT', type: 'string'},
{name: 'STATUS', type: 'string'},
{name: 'COLLI_CONTENT', type: 'int'},
{name: 'ACTUAL_STOCK', type: 'int'},
{name: 'PWHG', type: 'int'},
{name: 'PWG', type: 'int'},
{name: 'MP_NO', type: 'int', convert: checkType},
{name: 'INVOICE_TEXT', type: 'string', convert: checkType},
{name: 'LABEL_TYPE', type: 'string'},
{name: 'LABEL_SIGN', type: 'string', convert: checkType}
]
});
The Store :
var labels = Ext.create('Ext.data.JsonStore', {
model: 'LabelModel',
successProperty: 'success',
proxy: {
type: 'ajax',
url: 'lib/db/get-label-list.php',
timeout: 120000,
reader: {
type: 'json',
root: 'labelList',
idProperty: 'LABEL_ID'
}
}
});
Button Handler :
xtype: 'button',
width: 90,
text: 'GÖNDER',
cls: 'x-btn-gonder',
handler: function(){
var ppt = Ext.getCmp('labelType').getValue();
var sb = Ext.getCmp('basic-statusbar');
var count = Ext.getCmp('labelGrids').getSelectionModel().getCount();
var rows = Ext.getCmp('labelGrids').getSelectionModel().getSelection();
var cmb = Ext.getCmp('labelType');
if(ppt == null) {
dialog.show();
} else {
if(count > 0) {
for (var i = 0; i < count; i++)
{
console.log(rows[i].data.LABEL_TYPE, rows[i].data.LABEL_ID);
cmb.reset(); // clear combobox selected value after send to printer
}
// set statusbar text after print
sb.setStatus({
text: 'Etiketler yazıcıya gönderildi..!',
iconCls: 'x-status-saved',
clear: true
});
// remove checked items
Ext.select('.x-grid-row-selected').each(function (element) {
Ext.getCmp('labelGrids').getSelectionModel().deselectAll();
});
} else if(count == 0) {
sb.setStatus({
iconCls: 'x-status-error',
text: 'Lütfen yazdırmak istediğiniz etiketleri seçiniz!'
});
}
winPaper.hide();
}
}