We Keep Coding

How to shorten data bind of model on Ext JS?

As you will notice JSON returns different values within same field name and thusly I've binded to required value with dot notation. But I'm using same panel on different classes, so I need to figure out a better way to bind specified value. I've tried to use mapping on BookStatModel but couldn't be success.
How can I achieve for a shorten/roboust usage of data binding to JSON which have different values on same field name.
I can't alter server response;
{
"success": true,
"msg": "OK",
"count": 5,
"data": [
{
"bid": 1000655,
"code": "TOTALPENDING",
"totalcount": 1
},
{
"bid": 1000655,
"code": "TOTALLEFT",
"totalcount": 2
},
I'm getting JSON through VM stores;
// VM
stores: {
bookStore: {
model: 'MyApp.model.base.BookStatModel',
autoLoad: true,
session: true,
proxy: {
url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
}
}
},
// Model itself
Ext.define('MyApp.model.base.BookStatModel', {
extend: 'MyApp.model.base.StatResultModel',
requires: [
'MyApp.Globals',
'MyApp.FldNames'
],
fields: [
{name: 'bid', type: MyApp.FldTypes.INT},
{name: 'code'}
//{name: 'currentBonus', mapping: 'bookStore.data.items.1.totalcount', type: 'integer'},
//{name: 'pendingBonus', mapping: 'bookStore.data.items.0.totalcount', type: 'integer'},
//{name: 'totalBonus', mapping: 'bookStore.data.items.2.totalcount', type: 'integer'}
]
});
and finally bind those data to panel with bind config;
{
xtype: 'infocard',
flex: 1,
margin: '0 5 0 0',
bodyStyle: {
"background-color": "#DFE684"
},
items: [{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle',
pack: 'end'
},
flex: 2,
items: [{
xtype: 'container',
userCls: 'infocardCount',
bind: {
//In another 'infocard' binds to 'items.0.totalcount'
html: '{bookStore.data.items.1.totalcount}'
//html: '{currentBonus}' //Couldn't render value
},
flex: 1
}, {
xtype: 'component',
height: 10
}, {
xtype: 'container',
userCls: 'infocardCode',
padding: '10',
bind: {
//In another 'infocard' binds to 'items.0.code'
html: '{bookStore.data.items.1.code}'
},
flex: 1
}]
},

Formulas is the answer For your design this should work :
https://fiddle.sencha.com/#view/editor&fiddle/2edq
But my suggestion is to use a bonuses grid where bonustype is a column (currentBonus,pendingBonus,totalBonus)

How to format returned string value of JSON with Ext JS?

I'm getting this JSON below and need to format code field' string value to some other text. For example 'TOTALPENDING' will render as "Pending Bonus" and 'TOTALLEFT' to "Current Bonus". How can i achieve to this?
{
"success": true,
"msg": "OK",
"count": 5,
"data": [
{
"bookerid": 103083420,
"code": "TOTALPENDING",
"totalcount": 1
},
{
"bookerid": 103083420,
"code": "TOTALLEFT",
"totalcount": 2
},
Data fetchs through ViewModel stores;
stores: {
bookStore: {
model: 'MyApp.model.base.BookStatModel',
autoLoad: true,
session: true,
proxy: {
url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
}
}
},

For this you need to use convert config inside of model.
In this FIDDLE, I have created a demo using grid, store and model. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: ['bookerid', {
name: 'code',
convert: function (v, rec) {
switch (v) {
case 'TOTALPENDING':
v = 'Pending Bonus';
break;
case 'TOTALLEFT':
v = 'Current Bonus';
break;
default:
v = '';
break;
}
return v;
}
}, 'totalcount'],
});
Ext.define('TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
stores: {
books: {
model: 'Book',
proxy: {
type: 'ajax',
url: 'book.json',
reader: {
type: 'json',
rootProperty: 'data',
keepRawData: true
}
},
autoLoad: true
}
}
});
Ext.create({
xtype: 'container',
layout: 'vbox',
fullscreen: true,
renderTo: Ext.getBody(),
viewModel: {
type: 'test'
},
items: [{
xtype: 'container',
userCls: 'infocardCount',
margin: 10,
bind: {
html: '<small>If value is 0 then we can use pipes and in that case you need to pass 0 inside of string like this <b> books.data.items.0.totalcount || "0"</b> </small><br><br> <b style="color: #3c3c3c;background: #ccc;padding: 10px;margin: 10px;">{books.data.items.0.totalcount || "0"}</b>'
}
}, {
xtype: 'grid',
flex: 1,
width: '100%',
title: 'Book Data',
bind: {
store: '{books}'
},
columns: [{
text: 'BOOK ID',
flex: 1,
dataIndex: 'bookerid'
}, {
text: 'CODE',
dataIndex: 'code',
flex: 1
}, {
text: 'TOTAL',
flex: 1,
dataIndex: 'totalcount'
}]
}]
});
}
});
JSON FILE
{
"success": true,
"msg": "OK",
"count": 5,
"data": [{
"bookerid": 103083420,
"code": "TOTALPENDING",
"totalcount": 0
}, {
"bookerid": 103083421,
"code": "TOTALLEFT",
"totalcount": 15
}, {
"bookerid": 103083422,
"code": "TOTALPENDING",
"totalcount": 12
}, {
"bookerid": 103083423,
"code": "TOTALLEFT",
"totalcount": 10
}, {
"bookerid": 103083424,
"code": "TOTALLEFT",
"totalcount": 16
}]
}

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;
}
}
},

Sencha Touch 2 Can't Parse Json data

I'm very new to Sencha touch. I have to Load JSON data in a list.
My Panel.js
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.Toolbar',
'Ext.dataview.List',
'Ext.XTemplate'],
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Test'
}, {
xtype: 'list',
itemTpl: [
'\'<tpl for="polls">\',',
' \'<div> {title}</div>\',',
' \'<div> {uri}</div>\',',
'\'</tpl>\','],
store: 'MyStore'
}]
}
});
MyModel.js
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.JsonP'],
config: {
fields: [{
name: 'title'
}, {
name: 'uri'
}]
}
});
MyStore.js
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyStore',
proxy: {
type: 'jsonp',
url: 'my_web_site_url/polls',
reader: {
type: 'json',
rootProperty: 'polls'
}
}
}
});
The JSON FILE has the following format..
{
"polls": [
{
"title": "how r u?",
"uri": "/polls/answer1"
}
]
}
and my_web_site_url/polls/uri will give u the
{
"choices": [
{
"choice": "fine",
"votes": 0
},
{
"choice": "good",
"votes": 0
},
{
"choice": "sad",
"votes": 0
}
],
"title": "how r u?",
"uri": "/polls/answers1"
}
When I try 'Load Data' in the Sencha Architect it shows:
Unable to load the data Using the supplied Configuration open in Browser my_website_url/polls

How do I show nested data into a tree?

Further progress. Please see at http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel
I always appreciate any further advise.
I am trying to develop a simple extJS Ext 4.0.2a script to display some nested data as a Drag&Drop tree.
To try, I use a simple example from http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
Data are given as a users.json file:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
I wish to display data as a tree, whose first level nodes are users, second level nodes are orders, and so on.
From the same doc, I learn how to define my models (I believe):
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', // rest
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
})
;
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
next, I define a tree store and a tree panel (for some selected fields):
var store = Ext.create('Ext.data.TreeStore', {
model: 'User',
autoLoad: true,
autoSync: true,
root: {
name: "Root node",
id: '0',
expanded: true
},
sorters: [{
property: 'id',
direction: 'ASC' // DESC
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
displayField: 'name', // what nodes display (default->text)
columns: [{
xtype: 'treecolumn',
text: 'name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'total',
dataIndex: 'total',
width: 150,
flex: 1,
sortable: true
}, {
text: 'price',
dataIndex: 'price',
width: 50,
flex: 1,
sortable: true
},{
text: 'quantity',
dataIndex: 'quantity',
width: 150,
flex: 1
}, {
text: 'id',
dataIndex: 'id',
flex: 1,
width: 15,
sortable: true
}],
collapsible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', // see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor : '7B68EE',
nodeHighlightOnDrop : true,
nodeHighlightOnRepair: true,
enableDrag: true,
enableDrop: true
}
},
renderTo: 'tree-div',
height: 300,
width: 900,
title: 'Items',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});
I see the panel, the root and the first level users (as subnodes of the root). I do not see any subnodes (orders, order_items and so on).
I looked carefully at a number of posts, improved things quite a lot, but still miss to get a working solution.

I am facing the same task, and first was glad to run into your post!
After 5 hours of exploring the official docs regarding to it:
http://docs.sencha.com/ext-js/4-0/#!/guide/data
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
I was able to populate my nested treestore with nothing better than this:
(in my case the main model is Camgroup which hasMany Camera as 'cams': which allows to use .cams() for every group)
Ext.define('AV.store.sCamgroups', {
extend: 'Ext.data.TreeStore',
model: 'AV.model.Camgroup',
autoLoad: true,
root: {
expanded: true,
text: "Grouped Cameras"
},
proxy: {
type: 'ajax',
url: 'data/camgroups.json',
reader: {
type: 'json',
root: 'camgroups',
successProperty: 'success'
}
},
listeners: {
load: function(thisStore, rootnode, records, successful, eOpts){
records.forEach(function(group){
group.cams().each(function(cam) {
group.appendChild({
text: cam.get('name'),
leaf: true
});
});
});
}
}
});
camgroups.json returns smth like this:
{
success: true,
camgroups: [{
"id" : "group1",
"name" : "Exterior cams",
"cams" : [{
"id" : "cam3",
"name" : "Camera three",
"url" : "...",
"img" : "images/cams/3.png",
"ratio" : 1.33
},{
"id" : "cam4",
"name" : "Camera four",
"url" : "...",
"img" : "images/cams/4.png",
"ratio" : 1.33
}]
}]
}
Hope this will help you though keep looking for a better solution (prob defining a proper reader).
Again, in "Ext.data.reader.Reader" I can see that Reader has config property 'implicitIncludes' which is supposed 'to automatically parse models nested within other models in a response object', but I cannot make it working =(
Cheers,
Ilya

Further progress.
Please see at
http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel
I appreciate any further advise.
I made some progress. It seems I need to modify my json:
{
"children": [ <<<<---- use the same string to insert nested data, see below too
{
"id": 12,
"name": "Ed2",
"children": [] <<<<---- need this line, otherwise, JS tries to load subnodes for ever
},
{
"id": 123,
"name": "Ed",
"children": [ <<<<---- as above
{
"id": 50,
"total": 100,
"info" : "hello",
"name" : "ciao",
"children": [ <<<<---- as above
{
"id" : 20,
"price" : 40,
"quantity": 2,
"children" : { <<<<---- as above
"id": 1000,
"name": "MacBook Pro",
"children": [] <<<<---- as above bis
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"children" : { <<<<---- as above
"id": 1001,
"name": "iPhone",
"children": [] <<<<---- as above bis
}
}
]
}
]
}
]
}
Then the following definition of a model works:
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name', 'info', 'price', 'quantity', 'order_id', 'product_id'
],
proxy: {
type: 'ajax', //rest
url : 'ex1.json',
reader: {
type: 'json',
root: 'children'
}
}
});
So, it seems that associations among models for the different levels of my nested data are not needed at all.
It works, although I am not sure whether there are drawbacks or not.
I am still looking for your advise, I go by try&mistake, I do not see the underlying logic yet.
Thks.
I have second thoughts. The trick to use a unique string 'children' does not seem so good.
Let me consider a very simple json:
{
"users": [
{
"id": 12,
"name": "Ed2",
"orders": []
},
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"info" : "hello",
"name" : "MM",
"leaf" : 'true',
"some_else": []
}]
}
]
}
The extJS tree I wish to get is:
Root
|--ED
|--ED2
|--MM
The model is just
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', //rest
url : 'my_file.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'name', 'info'
],
belongsTo: 'User'
});
The final output I get is just:
Root
|--ED
|--ED2
is it a mistake of mine, or a missing feature? is there a way out without to change my json?
Thanks a lot