We Keep Coding

Extjs 6 grid + JSON

I have this JSON:
{
"aaa": {
"list": {
"count":"1",
"data": [
{"id":"1","username":"user1","email":"user1#test.com"}
]
}
}
}
And this is my Store:
var store = Ext.create('Ext.data.Store', {
fields : [ 'id',
'username',
'email'],
autoLoad : true,
proxy: {
type: 'ajax',
api: {
read: 'server/users'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
}
}
});
And this is my Grid:
xtype: 'grid',
title: 'Users',
id: 'users',
store: store,
columns: {
items: [
{text: 'ID', dataIndex: 'id', editor: 'textfield'},
{text: 'Name', dataIndex: 'name', editor: 'textfield' },
{text: 'Email', dataIndex: 'email', editor: 'textfield' },
]
},
But this code is not working. I don't show JSON data on my grid. I think the problem is that I don't reach JSON elements.
How can I reach this elements? (aaa.data.id, aaa.data.name, aaa.data.email is not working)

Since you don't want (or can't) change the structure of your JSON, change the reader of the proxy on your store to correspondent with the data structure of your JSON.
reader: {
type: 'json',
rootProperty: 'aaa.list.data',
totalProperty: 'aaa.list.count'
}

The root should be root: 'aaa.list.data'. The root is supposed to point to the array of records. data doesn't appear in the top level object returned at all. It would be like saying:
var o = {
aaa: {
data: [{}]
}
}
console.log(o.data); // Nothing

You can use the reader's transform method to format the data before the store processing takes place.

extjs record destroy by desired property

I'm developing Exjs mvc application.
I have an Extjs model :
Ext.define('JC.model.File', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'fileName', type: 'string'},
{name: 'fileSize', type: 'string'},
{name: 'position', type: 'string'}
]
});
and a store:
Ext.define('JC.store.Files', {
extend: 'Ext.data.Store',
model: 'JC.model.File',
proxy: {
url: JC.Util.createUrl('upload/getfiles'),
type: 'ajax',
simpleSortMode: true,
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
},
api: {
create: '',
read: undefined,
update: undefined,
destroy: JC.Util.createUrl('upload/deletefile')
},
actionMethods:{create: 'POST', read: 'GET', update: 'POST', destroy: 'GET'}
}
});
and a grid panel with the following columns:
columns: [
{header: 'id', dataIndex: 'id', flex: 1},
{header: 'file name', dataIndex: 'fileName', flex: 1},
{header: 'file size', dataIndex: 'fileSize', flex: 1},
{header: 'position', dataIndex: 'position', flex: 1}, {
xtype: 'actioncolumn', items: [
{
icon: 'css/images/tree/black-trash-16.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().destroy(rec);
}
}
]
}
],
at the line:
grid.getStore().destroy(rec);
an ajax request is created as below:
http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=JC.model.File-6
I want the id requested for delete operation be my desired property of record i,e rec.id and I want it to be int type.I want the request to be something like this:
http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=6
How can I do that?

I have setup a fiddle to replicate the issue.
I only managed to get this working by changing the actionMethod for the destory action to POST and setting an idProperty on the model.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('File', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'fileName',
type: 'string'
}, {
name: 'fileSize',
type: 'string'
}, {
name: 'position',
type: 'string'
}]
});
Ext.define('Files', {
extend: 'Ext.data.Store',
model: 'File',
autoLoad: true,
proxy: {
url: 'data1.json',
type: 'ajax',
simpleSortMode: true,
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'totalCount'
},
api: {
create: '',
read: 'data1.json',
update: '',
destroy: 'delete.json',
},
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
}
}
});
var store = Ext.create('Files');
Ext.create('Ext.grid.Panel', {
title: 'Test',
store: store,
columns: [{
header: 'id',
dataIndex: 'id',
flex: 1
}, {
header: 'file name',
dataIndex: 'fileName',
flex: 1
}, {
header: 'file size',
dataIndex: 'fileSize',
flex: 1
}, {
header: 'position',
dataIndex: 'position',
flex: 1
}, {
xtype: 'actioncolumn',
items: [{
icon: 'css/images/tree/black-trash-16.png',
tooltip: 'Delete',
width:50,
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
rec.erase();
}
}]
}],
height: 300,
width: 600,
renderTo: Ext.getBody()
});
}
});
// Sample JSON Data
{
"success": true,
"totalCount": 5,
"items": [{
"id": 1,
"fileName": 'file1.png',
"fileSize": 93204,
"position": 1
}, {
"id": 2,
"fileName": 'file2.png',
"fileSize": 93204,
"position": 1
}, {
"id": 3,
"fileName": 'file3.png',
"fileSize": 93204,
"position": 1
}, {
"id": 4,
"fileName": 'file4.png',
"fileSize": 93204,
"position": 1
}, {
"id": 5,
"fileName": 'file5.png',
"fileSize": 93204,
"position": 1
}]
}

I know this is an old post but you can send the model data that you wish by defining the proxy.writer in the model, in the proxy writer definition you can define the transform.fn which returns the data to send to the server as the model.data:
writer: {
type: 'json',
allDataOptions: {changes: true, critical: true},
partialDataOptions: {changes: true, critical: true},
encode: true,
rootProperty: 'group',
transform: {
fn: function(data, request, isDraft, model) {
if(request) {
if(request.getAction() == 'destroy') {
data.id = me.get('id');
data.type = me.get('type');
}else if(request.getAction() == 'create') {
delete(data.id);
}
}
return data;
}
}
},

Proxy of ExtJS model

Im using ExtJS 4.2. I have following code:
Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'type',
type: 'string'
}, {
name: 'type_id',
type: 'int'
}],
proxy: {
type: 'ajax',
api: {
update: 'localhost/update'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
root: 'data',
encode: true
}
}
});
var record = new Model({
id: 100,
type_id: 2
});
record.phantom = false;
record.save({
success: function(record) {
console.log(record.get('type'));
}
});
Param of request localhost/update:
data: {id: 100, type_id: 2}
Response:
data: {id: 100, type_id: 2, type: 'type of record'}
Why it
console.log(record.get('type'));
displays null?

You may have to add "success": true to your response or set successProperty to null on your reader.

Combobox does not set the good value on load, but rather blank

I have a combobox and when I load it with a particular value (not empty/default), it rendered blank.
I think it's because the properties name and valueField are different. Create/update works and the values are in the combo. Can you help?
{
xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Organisme',
name: 'idOrganismePriseEnCharge',
displayField: 'Organisme',
store: 'Organismes',
valueField: 'idOrganisme'
}
My Model:
Ext.define('MG.model.TypeAide', {
extend: 'Ext.data.Model',
idProperty: 'idTypeAide',
fields: [
{
name: 'idTypeAide'
},
{
name: 'TypeAide'
},
{
name: 'Montant'
},
{
name: 'idOrganismePriseEnCharge'
},
{
name: 'Organisme'
}
]
});
My store:
Ext.define('MG.store.TypesAides', {
extend: 'Ext.data.Store',
requires: [
'MG.model.TypeAide'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MG.model.TypeAide',
storeId: 'StoreTypesAides',
proxy: {
type: 'ajax',
api: {
create: 'http://localhost/MG/php/TypesAides.php?action=create',
read: 'http://localhost/MG/php/TypesAides.php?action=read',
update: 'http://localhost/MG/php/TypesAides.php?action=update',
destroy: 'http://localhost/MG/php/TypesAides.php?action=destroy'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});

valueField should match a field from the model you're using. In your case it's idOrganisme and there is no such field in the model.

ExtJs 4 Grid Paging

I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.
Json-reply from server is:
{
"totalCount":"2",
"companies":[
{
"id":"1",
"name":"Name1",
"region":"Reg1",
"address":"Addr1",
"dealCount":"3",
"dealAmount":"19250",
"latestDealDate":"2012-01-09"
},
{
"id":"2",
"name":"Name2",
"region":"Reg2",
"address":"Addr2",
"dealCount":"2",
"dealAmount":"12150",
"latestDealDate":"2012-01-08"
}
]
}
JavaScript code, which creates store, grid, e.t.c. is:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.layout.*'
]);
Ext.onReady(function(){
// Define data model
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name', 'region', 'address',
{
name: 'dealCount',
type: 'int'
},
{
name: 'dealAmount',
type: 'int'
},
{
name: 'latestDealDate',
type: 'string'
}
],
idProperty: 'id'
});
// Create data store
var companies = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Company',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php'
}),
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
// Create data grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: companies,
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Region',
dataIndex: 'region'
},
{
text: 'Address',
dataIndex: 'address'
},
{
text: 'Deal Count',
dataIndex: 'dealCount'
},
{
text: 'Deal Amount',
dataIndex: 'dealAmount'
},
{
text: 'Latest Deal Date',
dataIndex: 'latestDealDate'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: companies,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// Load first data page
companies.loadPage(1);
});
Firebug shows, that server responds with json-data, but grid remains empty. How can I fix it?

You should define reader inside proxy (at least that helped for me). Eg:
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php',
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
})
})
Working sample: http://jsfiddle.net/ycDzL/3/