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

extjs populating a panel with multiple data sources

I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.
I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.
the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.
`
var JSONSTORE = new Ext.data.JsonStore ({
// Store Configs
autoLoad: true,
url: 'json_data_call.php',
baseParams: {action: 'read'},
// Reader Configs
storeId: 'store1',
idProperty: 'store1',
root: 'data',
sortInfo: {
field: 'field_name',
direction: 'ASC'
},
fields: [
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'int'}
],
autoSave: false
});
JsonStore.on('exception',JsonSave,this);
JsonStore.on('load',function(){
autoDiagnosticsJsonStore.warn_err_loaded = true;
if(autoDiagnosticsJsonStore.warn_err_loaded)
{
console.log(autoDiagnosticsJsonStore);
}else{
console.log('ERROR');
}
});
/*
* ColumnModel
*/
var ColumnModel = new Ext.grid.ColumnModel ({
defaults: { menuDisabled: true },
columns: [
{header: 'Type', hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.ERR_TYPE == 'WARNING') {
metaData.css = 'cog_bg_orange';
}
if (record.data.ERR_TYPE == 'ERROR') {
metaData.css = 'cog_bg_red';
}
return value;
}
},
{header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
]
});
var errorGrid = new Ext.grid.GridPanel({
id: 'nmerrorGrid',
enableColumnMove: false,
autoHeight: true,
xtype: 'grid',
ds: JsonStore,
cm: ColumnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
$error_panel = "
var errorPanel = new Ext.Panel({
title: 'field_name',
collapsible: true,
anchor: '98%',
height: 300,
frame: true,
layout: 'fit',
items: [ errorGrid ]
});`

If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.
If you create a model for the records of your store, you can create a field that is calculated using the record's values.
Example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstName',
type: 'string'
},{
name: 'lastName',
type: 'string'
},{
name: 'fullName',
calculate: function (data) {
return data.firstName + ' ' + data.lastName;
}
}]
});
The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.

Multiple select checkbox is not returning values in Extjs 4.2 grid

I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).

Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();

You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!

Uncaught TypeError: Cannot read property 'dom' of undefined

How to solve this error Uncaught TypeError: Cannot read property 'dom' of undefined in extjs?
I`m using dnd and put dnd code into layout browser
code :
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function() {
//refresh source grid
gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function(ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function(ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};

If you try and render a component to a dom element that isn't found (or dom ID that isn't found) you'll get that error. See the example below to reproduce the error - then comment out the bad renderTo and uncomment the renderTo: Ext.getBody() to resolve the issue.
see this FIDDLE
CODE SNIPPET
Ext.onReady(function () {
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
renderTo:Ext.getBody(),
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function () {
//refresh source grid
//gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function (ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function (ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};
});

It means that the object which you expect to have the dom attribute is undefined.
EDIT:
The error generates at this line:
formPanel.body.dom
It means that the formPanel is not rendered because you are trying to access its body property. This property is Available since: Ext 4.1.3

I'm seeing a similar error in code that executes for validation. What I'm doing has nothing to do with directly accessing the DOM, however I'm still getting a similar condition. The answer above is incomplete, the dom property is available on some ui elements in 3.x...
in earlier versions of Extjs (3.x) the property is mainBody.dom and not body.dom
directly from the source of hasRows() for grids in 3.4:
var fc = this.**mainBody.dom**.firstChild;
return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';

Using Paging toolbar with Grid Panel

I am stuck at this point since a long time. Please help me identify my error.
I am trying to show data in grid panel and since data is large I am also using Paging Toolbar. This is my code (I am not sure but I think problem is in store that I am creating).
var myData = {
record: [{
name: "Record 0",
column1: "0",
column2: "0"
}, {
name: "Record 1",
column1: "1",
column2: "1"
}, {
name: "Record 2",
column1: "2",
column2: "2"
},
]
};
var fields = [{
name: 'name',
mapping: 'name'
}, {
name: 'column1',
mapping: 'column1'
}, {
name: 'column2',
mapping: 'column2'
}
];
var store = new Ext.data.Store({
id: 'simpsonsStore',
fields: ['name', 'column1', 'column2'],
pageSize: 5, // items per page
data: myData,
reader: {
root: 'record',
type: 'json'
}
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Record Name",
width: 50,
sortable: true,
dataIndex: 'name'
}, {
header: "column1",
width: 50,
sortable: true,
dataIndex: 'column1'
}, {
header: "column2",
width: 50,
sortable: true,
dataIndex: 'column2'
}
];
store.load({
params: {
start: 0,
limit: 5
}
});
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: store,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 650,
height: 325,
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}
]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'column',
renderTo: Ext.getBody(),
items: [
grid
],
bbar: [
'->', {
text: 'Reset Example',
handler: function () {
gridStore.loadData(myData);
}
}
]
});

To start with the extraneous comma on your myData.record array will prevent this from running.
var myData = {
record : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" }**,**
]
};

Instead of dockedItems try setting pagination bar at grid bbar.
new Ext.PagingToolbar({
pageSize : 20,
store : store,
displayInfo : true
});