I am trying to populate Ext JS 4 Grid with json data. Unfortunatelly no matter what i do it's still remains empty. The JS function is below:
function buildGrid() {
Ext.define('Contact', {
extend: 'Ext.data.Model',
fields: ['Id', 'Name', 'State', 'Age']
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
proxy: {
type: 'ajax',
url: 'GridData',
reader: {
type: 'json',
record: 'data',
totalProperty: 'total'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: "Name", flex: 1, width: 120, dataIndex: 'Name', sortable: true },
{ text: "State", width: 100, dataIndex: 'State', sortable: true },
{ text: "Age", width: 115, dataIndex: 'Age', sortable: true },
],
height: 210,
width: 600,
split: true,
renderTo: Ext.getBody()
}).show();
}
Ext.onReady(buildGrid);
The server responce is look like:
{"callback":"1307878654818","total":1,"data":[{"Id":"ac2bedf1-bb5c-46e0-ba50-a6628341ca25","Name":"Smith","State":"NU","Age":24}]}
so it looks ok. However the grid view is not showing the date.
Anyone can see what i am doing wrong?
You haven't specified the root property. Try
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
Related
I have created a mini EXTJS app, defined a model, store, and grid. I have verified the store is working because I can use Chrome debug tools to create an instance and view the data. However, when I attempt to display the data in a grid it never shows.
Here is the code for the app.js:
Ext.application({
launch: function () {
Ext.define('Companies', {
extend: 'Ext.data.Model',
fields: ['id', 'link', 'name']
});
Ext.define('CompaniesStore', {
extend: 'Ext.data.Store',
model: 'Companies',
storeId: 'cStore',
autoLoad: true,
proxy: {
type: 'rest',
url: 'http://corky52547.somee.com/Service1.svc/Companies'
}
});
Ext.create('Ext.container.Viewport', {
name : "viewPort2",
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
title: 'Bill Reminder Web'
},
{
xtype: 'grid',
title: 'Bills',
height: 100,
width: 100,
columns: [
{text: 'ID', width: 100, dataIndex: 'id'},
{text: 'Link', flex: 1, dataIndex: 'link'},
{text: 'Name', width: 200, dataIndex: 'name'}
],
store: Ext.create('CompaniesStore',{})
}
]
});
}
});
Update:
I am now able to get the data to display but like this with no theme. How do I update the theme?
CORS (Cross Origin requests) is blocking the request to domain.
Layout Fit is also causing some issues.
To get CORS working, you will need to add
Access-Control-Allow-Origin: *
Otherwise, you can use middle-ware proxy like cors-anywhere
Minor mistakes like field names should be matched with exact case they are available in response.
Here is a working POC Code:
Ext.application({
name: "Application",
launch: function () {
Ext.define('Companies', {
extend: 'Ext.data.Model',
fields: ['ID', 'Link', 'Name']
});
Ext.define('CompaniesStore', {
extend: 'Ext.data.Store',
model: 'Companies',
storeId: 'cStore',
autoLoad: true,
proxy: {
type: 'rest',
url: 'https://cors-anywhere.herokuapp.com/http://corky52547.somee.com/Service1.svc/Companies'
}
});
Ext.create('Ext.container.Viewport', {
name: "viewPort2",
renderTo: Ext.getBody(),
items: [{
title: 'Bill Reminder Web'
}, {
xtype: 'grid',
title: 'Bills',
flex: 1,
columns: [{
text: 'ID',
width: 100,
dataIndex: 'ID'
}, {
text: 'Link',
flex: 1,
dataIndex: 'Link'
}, {
text: 'Name',
width: 200,
dataIndex: 'Name'
}],
store: Ext.create('CompaniesStore', {})
}]
});
}
});
Here is working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2gbc
I have a basic gridpanel that is fed from a store with 600 records, but my paging toolbar only shows the first page, regardless of the pageSize config in the store. For example...
When pageSize = 50, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 50 of 50
When pageSize = 100, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 100 of 100
Thoughts? Source below.
employee_store.js
var empUrlRoot = 'http://extjsinaction.com/crud.php'
+ '?model=Employee&method=';
//Instantiate employee store
var employeeStore = Ext.create('Ext.data.Store', {
model: 'Employee',
pageSize: 50,
proxy: {
type: 'jsonp',
api: {
create: empUrlRoot + 'CREATE',
read: empUrlRoot + 'READ',
udpate: empUrlRoot + 'UPDATE',
destroy: empUrlRoot + 'DESTROY'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: true,
batch: false,
writeRecords: function(request, data){
request.jsonData = data;
return request;
}
}
}
});
gridpanel.js
Ext.onReady(function(){
// gridpanel column configurations
var columns = [
{
xtype: 'templatecolumn',
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 50,
resizable: false,
hidden: true,
// template renders id column blue:
tpl: '<span style="color: #0000FF;">{id}</span>'
},
{
header: 'Last Name',
dataIndex: 'lastName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'First Name',
dataIndex: 'firstName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'Address',
dataIndex: 'street',
sortable: false,
flex: 1,
// template renders column with additional content:
tpl: '{street}<br />{city} {state}, {zip}'
}
];
// Configure the gridpanel paging toolbar
var pagingtoolbar = {
xtype: 'pagingtoolbar',
store: employeeStore,
dock: 'bottom',
displayInfo: true
};
// Create gridpanel
var grid = Ext.create('Ext.grid.Panel', {
xtype: 'grid',
columns: columns,
store: employeeStore,
loadMask: true,
selType: 'rowmodel',
singleSelect: true,
stripeRows: true,
dockedItems: [
pagingtoolbar
]
});
// Configure and create container for gridpanel
Ext.create('Ext.Window', {
height: 350,
width: 550,
border: false,
layout: 'fit',
items: grid //the gridpanel
}).show();
// Load the employeeStore
employeeStore.load();
});
employee_model.js
// Define employee model
Ext.define('Employee', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id',type: 'int'},
{name: 'departmentId', type: 'int' },
{name:'dateHired', type:'date', format:'Y-m-d'},
{name:'dateFired', type:'date', format:'Y-m-d'},
{name:'dob', type:'date', format: 'Y-m-d'},
'firstName',
'lastName',
'title',
'street',
'city',
'state',
'zip'
]
});
You have to return total record count.
reader: {
root : 'data',
totalProperty: 'total' // this is default, you can change it
}
Next in server response you need:
{
data : ['your data here'],
total : 2000
}
store, window and grid in this form. I am want insert to grid value from store. On picture I am pointed what data I am want insert
Model:
Ext.onReady(function () {Ext.define('RRD',{ extend: 'Ext.data.Model',
fields: [
'data'
]
});
Store:
var myStore = Ext.create('Ext.data.Store', {
model: 'RRD',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/price/books',
reader: {
type: 'json',
root: 'data',
successProperty: 'status'
}
}
});
Table and window:
var myTable = Ext.create('Ext.grid.Panel', { store: myStore,
columns: [
{ text : 'Value', sortable : true, dataIndex: 'data', flex: 0, width: 100 },
],
height: 900,
width: 300,
title: 'Data'
});
var win = Ext.create('Ext.Window', { width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'RRD Table',
renderTo: Ext.getBody(),
layout: 'fit',
items: [myTable]
});
});
How insert this date to grid?
your reader should take the nesting of your JSON into account:
reader: {
type: 'json',
root: 'rawData.data',
successProperty: 'rawData.status'
}
and you should send in your status either true or false
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, {name: 'Route_Seq' , type: 'int'},'Location_Name','Location_ID','Route_ID']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteSeqModel',
storeId: 'RouteSeqStore',
autoLoad: false,
sortInfo: { field: "Route_Seq", direction: "ASC" },
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
update: 'update-routeseq.php',
},
actionMethods: 'POST',
baseParams: {
_id : 0,
},
reader: {
type: 'json',
idProperty: '_id'
},
writer: {
type: 'json',
id: '_id'
}
}
});
Ext.define('MyApp.view.MyGridPanelRouteSeq', {
extend: 'Ext.grid.Panel',
id:'MyGridPanelRouteSeq',
alias: 'widget.mygridpanelrouteseq',
renderTo: Ext.getBody(),
height: window.innerHeight,
width: window.innerWidth/2,
title: 'Route Sequence Setting',
sortableColumns: false,
store: RouteSeqStore,
columns: [
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'Route_Seq',
text: 'Sequence'
},
{
xtype: 'gridcolumn',
width: 160,
dataIndex: 'Location_Name',
text: 'Location Name'
}]
})
Sequence is read the data from Route_Seq, but the column is still not sorting yet.
i have no idea how come the grid is still not sorting..why?
Where did you get sortInfo from? It's not a valid store config.
You want:
sorters: [{
property: 'Route_Seq',
direction: 'DESC'
}]
Can someone explain to me why this isnt working? No errors whatsoever.
Ext.onReady(function () {
//Ext.Msg.alert('Status', 'Changes saved successfully.');
Ext.define('Bond', {
extend: 'Ext.data.Model',
fields: ['CUSIP', 'DESCRIPTION', 'COUPONRATE', 'ASKPRICE']
});
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'http://localhost:3197/Home/GetSecondaryOfferings',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP' },
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid',
width: 1000,
autoHeight: true,
title: 'JSON SIMPLE 2'
}).render();
});
this is what my JSON object look like:
{"totalCount":3316,"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}]}
The grid just doesnt populate, and I can see the JSON being returned to me from the server.
Thoughts?
The problem is the fact that you use a store with the alax/json type. Bacause you have a cross domain URL, the JSON.
Solution: Make sure the test files are hosted using HTTP from the same domain and all should be well:
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'SOData.json',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
try this way
var URLdata = window.location.protocol + "//" + window.location.host + "/" + "bigdata-dashboard" + "/conf/" +"survey.json" ;
var storedata = new Ext.data.Store({
fields: ['appeId','survId','location','surveyDate','surveyTime','inputUserId'],
proxy: {
type: 'rest',
url:URLdata,
reader: {
type: 'json',
root: 'items',
// totalProperty: 'totalCount'
}
}
});
storedata.load();
// create the grid
var grid = new Ext.grid.GridPanel({
store: storedata,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:470,
height:200
});
you need to change your service to return jsonp and change the store type to be jsonp, that will fix the issue,
Please let me know if you need more information