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);

jqxwidgets date value displays date 1970

I am trying to display date value from mysql database, it displays value successfully but its displaying date "Saturday, January 17, 1970 7:27 PM"
I am using following code
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var theme = 'energyblue';
var source =
{
datatype: "json",
datafields: [
{ name: 'startdate', type: 'date'},
{ name: 'scheduleend', type: 'date'},
{ name: 'venue', type: 'string'},
{ name: 'trainer', type: 'string'},
{ name: 'course', type: 'string'},
{ name: 'link', type: 'string'}
],
url: 'data.php',
cache: false,
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
theme: theme,
width: 1220,
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
localization: getLocalization('en'),
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Start Date', datafield: 'startdate', width: 260, cellsformat: 'f' },
{ text: 'End Date', datafield: 'scheduleend', width: 260, cellsformat: 'f'},
{ text: 'Venue', datafield: 'venue', width: 120 },
{ text: 'Trainer', datafield: 'trainer', width: 150 },
{ text: 'Course', datafield: 'course', width: 350 },
{ text: 'Link', datafield: 'link', width: 80, cellsalign: 'center', align: 'center', cellsformat: 'c2', cellsrenderer: function(row, cell, value) {
return '<div style="text-align: center; margin-top: 5px;"><a href="'+value+'"/>View</a></div>'
} }
]
});
});
</script>
Why date is displayed "Saturday, January 17, 1970 7:27 PM" ? How to display original date value?
Any reference or help will be much appreciated.
Regards

Load data from server side into ExtJs Grid

//****************controller********************
Ext.define('Insurance.controller.OpenQuoteController', {
extend: 'Ext.app.Controller',
//define the stores
stores: ['OpenQuote'],
//define the models
models: ['ApplicationListData'],
//define the views
views: ['OpenQuoteComp'],
refs: [{
ref: 'myGrid',
selector: 'grid'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function () {
//just a console log to show when the panel si rendered
console.log('The panel was rendered');
},
onMtai: function (t) {
console.log('You typed something!');
var thisRegEx = new RegExp(t.getValue(), "i");
var store = this.getOpenQuoteStore();
var grid = this.getMyGrid();
store.filterBy(function (rec) {
for (var i = 0; i < grid.columns.length; i++) {
// Do not search the fields that are passed in as omit columns
if (grid.omitColumns) {
if (grid.omitColumns.indexOf(grid.columns[i].dataIndex) === -1) {
if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
if (!grid.filterHidden && grid.columns[i].isHidden()) {
continue;
} else {
return true;
}
;
}
;
}
;
} else {
if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
if (!grid.filterHidden && grid.columns[i].isHidden()) {
continue;
} else {
return true;
}
;
}
;
}
;
}
return false;
});
}
});
//*******************view**************************
Ext.define('Insurance.view.openquote.OpenQuoteComp', {
extend: 'Ext.grid.Panel',
alias: 'widget.OpenQuoteGrid',
title: 'Diary Record(s):0',
width: 700,
xtype: 'openquotecomp',
defaults: {
flex: 1
// layout:'fit'
},
initComponent: function () {
this.columns = [
{header: 'Client Name', dataIndex: 'clientName'},
{header: 'Business Manager', dataIndex: 'bmManger'},
{header: 'Date', dataIndex: 'dealDate', flex: 1},
{header: 'Reference Number', dataIndex: 'refNumber'},
{header: 'Vehicle', dataIndex: 'vehicle'},
{header: 'Agent', dataIndex: 'agent'}
];
this.callParent(arguments);
}
//renderTo: Ext.getBody()
});
//***************model*********************
Ext.define('Insurance.model.ApplicationListData', {
extend: 'Ext.data.Model',
uses: [],
fields: [
{name: 'applicationID', type: 'int'},
{name: 'firstClientName', type: 'string'},
{name: 'secondClientName', type: 'string'},
{name: 'salePerson', type: 'string'},
{name: 'date', type: 'string'},
{name: 'ref', type: 'string'},
{name: 'vehicle', type: 'string'},
{name: 'businessManager', type: 'string'},
{name: 'locumName', type: 'string'},
{name: 'addressLineOneFirstClient', type: 'string'},
{name: 'addressLineOneSecondClient', type: 'string'},
{name: 'addressLineTwoFirstClient', type: 'string'},
{name: 'addressLineTwoSecondClient', type: 'string'},
{name: 'policyNumber', type: 'string'},
{name: 'agentName', type: 'string'},
{name: 'archiveIndicator', type: 'boolean'},
{name: 'createdByWS', type: 'boolean'}
]
});
//***************store****************
Ext.define('Insurance.store.OpenQuote', {
extend: 'Ext.data.Store',
model: 'Insurance.model.ApplicationListData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'QuoteServlet',
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'openquote',
successProperty: 'success'
}
}
});
These are some of the errors I am receiving:
Failed to load resource: the server responded with a status of 404 (Not Found) localhost:8080/extjs/app/view/…
[E] [Ext.Loader] Some requested files failed to load. ext-all-rtl-debug.js?_dc=1424789229907:5600
Uncaught Error: [Ext.Loader] Some requested files failed to load. ext-all-rtl-debug.js?_dc=1424789229907:1603
Could anybody help in resolving these errors

You want load json file in your Store? over this address?
"localhost:8080/extjs/app/view/OpenQuoteComp.js"
your controller method OpenQuoteComp Must return JsonResult... not json file...
return Json(new { openquote = "yourDataObject" , totalCount = itemsCount }, JsonRequestBehavior.AllowGet);

JQxTreeGrid is correctly rendered but data is not loaded from json source

Would appreciate some help tackling this please. So I have the following code to load up Json data into a Jquery grid.... jqxTreegrid. So far, The grid shows up but the data does not. In addition, debugger shows me no errors of any kind. So, I would appreciate any help to resolve this please.
$(document).ready(function () {
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'sid', type: 'string' },
{ name: 'id', type: 'string' },
{ name: 'position', type: 'string' },
{ name: 'created_at', type: 'string' },
{ name: 'created_meta', type: 'number' },
{ name: 'updated_at', type: 'string' },
{ name: 'updated_meta', type: 'string' },
{ name: 'meta_data', type: 'string' },
{ name: 'community_area_number', type: 'number' },
{ name: 'community_area_name', type: 'string' }
],
hierarchy:
{
root: 'sid'
},
id: 'sid',
//url: 'http://www.filedropper.com/employeesadv'
//url: 'gdiChicago/employeesadv.csv'
url: 'data.cityofchicago.org_Births-to-mothers-aged-15_19_kva-bt6k.json'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#content").on('rowselect', function(event){
// event arguments
var args = event.args;
// row data
var rowData = args.row;
// row key
var rowKey = args.key;
console.log('RowSelect selected');
event.stopPropagation();
});
$("#content").on('bindingComplete', function(event)
{
$("#content").jqxTreeGrid('hideColumn', 'name');
console.log('Tree successfully loaded');
});
$("#content").on('beforeLoadComplete', function (records) {
var data = new Array();
// update the loaded records. Dynamically add EmployeeName and EmployeeID fields.
for (var i = 0; i < records.length; i++) {
var employee = records[i];
console.log(employee);
}
});
// create Tree Grid
$("#content").jqxTreeGrid(
{
width: 1000,
source: dataAdapter,
pageable: true,
columnsResize: true,
ready: function()
{
// expand row with 'EmployeeKey = 32'
$("#content").jqxTreeGrid('expandRow', 32);
},
columns: [
{ text: 'sid', dataField: 'sid', minWidth: 100, width: 300 },
{ text: 'id', dataField:'id', minWidth: 100, width: 300 },
{ text: 'position', dataField:'position', minWidth: 100, width: 300 },
{ text: 'created at', dataField: 'created_at' , minWidth: 100, width: 300 },
{ text: 'created meta', dataField: 'created_meta' , minWidth: 100, width: 300 },
{ text: 'updated at', dataField: 'updated_at', minWidth: 100, width: 300 },
{ text: 'updated meta', dataField:'updated_meta', minWidth: 100, width: 300 },
{ text: 'meta', dataField:'meta', minWidth: 100, width: 300 },
{ text: 'Community Area Number', dataField: 'community_area_number' , minWidth: 100, width: 300 },
{ text: 'community area name', dataField: 'community_area_name', minWidth: 100, width: 300 }
]
});
});
The json datasource I am trying to load can be obtained at this link Public Health Statistics - Births to mothers aged 15-19 years old in Chicago, by year, 1999-2009

Instead of using
hierarchy:
{
root: 'sid'
},
try using
hierarchy:
{
keyDataField: { name: 'sid' }
},

Why doesn't this checkbox column work in this ExtJS grid?

The following ExtJS grid worked until I put the checkbox column in it, now I get this error:
I based the checkbox column code on this code.
What do I need to do to get the checkbox column to work?
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
[16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, false, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'boolean'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
},
{
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
},
{
xtype: 'checkcolumn',
header: 'Test',
dataIndex: 'rank',
width: 55
},
{
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});

You get this error because you have not included the CheckColumn extension. You can get the extension from : http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js .. include it and you should be able to remove the error..