Store multi-level - extjs4

I have the following json :
{"service":
{"description":"Export a list of amendments.","id":"504e1bf57e8d2fdd92b6c316cd000b25","name":"AT4AM_AmendmentsList","notes":"Export a list of amendments in a defined format, Word or XML.\r\n\r\n\"keywords\" : [ \"AT4AM\", \"DST\", \"Amendment\", \"Export\", \"Word\", \"XML\" ]","revision":"2-cd375cfd296ba97e934f12794d4930e9","status":"study","type":"entity",
"versions":[{"description":"v1.0 description...","id":"504e1bf57e8d2fdd92b6c316cd0017c0","version":1}]}}
I would like to display the list of versions into a grid.
here is my model :
Ext.define('XXXX.model.Version', {
extend: 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'version',
type : 'string'
}],
belongsTo: 'XXXX.model.Service',
proxy: {
type: 'rest',
id: 'id',
url : 'http://localhost:8080/xxxxx/services/service',
reader: {
type: 'json',
root: 'versions'
}
}
});
Thanks for help
Medley

use root: 'service.versions' in your reader's config.

Here is the solution I found :
1 - I added this to the model 'Service'
{type: 'hasMany', model: 'XXXX.model.Version', name: 'versions'}
2 - I used the configured RestProxy to make a GET request
Ext.ModelManager.getModel('XXXX.model.Service').load(serviceId, {
success: function(service) {
// Now, it is possible to access to all the versions of a service
service.versions().each(function(version) {
listOfVersions.push(version.data);
});
}
});
Regards
Medley

Related

Loading Json in Store to display it on List Sencha Touch 2 jsonp

This is my model
Ext.define("StockWatch.model.Market", {
extend: "Ext.data.Model",
config: {
idProperty: 'CompanyCode',
fields: [
{ name: 'CompanyCode', type: 'string' },
{ name: 'LastTradedPrice', type: 'string' },
{ name: 'PercentageDiff', type: 'string' },
{ name: 'FiftyTwoWeekHigh', type: 'string' },
{ name: 'FiftyTwoWeekLow', type: 'string' },
{ name: 'ChangePercent', type: 'string' },
{ name: 'Change', type: 'string' },
{ name: 'MarketCap', type: 'string' },
{ name: 'High', type: 'string' },
{ name: 'Low', type: 'string' },
{ name: 'PrevClose', type: 'string' },
{ name: 'OpenInterest', type: 'string' },
{ name: 'MarketLot', type: 'string' },
{ name: 'ChangeInOpenInterest', type: 'string' },
{ name: 'LastTradedTime', type: 'date', dateFormat: 'c' },
]
}
});
this is my store
Ext.define("StockWatch.store.Markets", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.LocalStorage", "Ext.data.proxy.JsonP", "StockWatch.model.Market"],
config: {
model: "StockWatch.model.Market",
autoLoad : true,
proxy : {
type : 'jsonp',
url : 'http://money.rediff.com/money1/current_status_new.php?companylist=17023928%7C17023929&id=1354690151&Rand=0.6305125835351646',
reader:{
type:'json',
rootProperty:''
}
}
}
});
I'm not able to get the data on to my list, may be somewhere fetching of data is wrong.
guide me to find the solution.
also I'm using pull to refresh list plugin, so will the data be loaded automatically each time i pull down the list or do i have to write something over there to??
thnx in advance
EDIT:
I also get this warning in the console
Resource interpreted as Script but transferred with MIME type text/html: "http://money.rediff.com/money1/current_status_new.php?companylist=17023928%7C17023929&id=1354690151&Rand=0.6305125835351646&_dc=1355822361093&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1".
use callbackKey
callbackKey: Specifies the GET parameter that will be sent to the server containing the function name to be executed when the request completes. Defaults to callback. Thus, a common request will be in the form of url?callback=Ext.data.JsonP.callback1
Defaults to: "callback"
You need to wrap the JSON response in a callback function for JSONP. It doesn't look like your remote call is returning this, try specifying a callback parameter - otherwise if the remote server does not allow this you need to pass it through another server to wrap it in a callback function.
Also, the warning you mentioned in the bottom of your post, don't worry about that. It won't cause any problems.

Adding a AJAX response data to a store

How to add a data to a json store if my data is coming from a back end AJAX call.
my store is as follows .
Ext.define('MyApp.store.GeographyMasterStore', { extend: 'Ext.data.Store',
requires: [
'MyApp.model.GeographyMasterModel'
],
config: {
model: 'MyApp.model.GeographyMasterModel',
storeId: 'geographyMasterStore',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
}
});
And my model is as follows:
Ext.define('MyApp.model.GeographyMasterModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'Code'
},
{
name: 'Description'
},
{
name: 'Level_Code',
mapping: 'Level Code'
},
{
name: 'Name'
}
]
}
});
If I add the data like this
var geographyMasterStore = Ext.getStore('geographyMasterStore');
geographyMasterStore.add(<data from backend AJAX call>);
it does not show me the mapped field i.e. Level_Code
Usually I when add a record to the store like this :
Ext.create('App.model.MyModel', JSON.parse(response.responseText);
Where response is the response from an Ext.Ajax.request
Hope this helps
You need create a model:
var record = Ext.create('model.GeographyMasterModel', Ext.JSON.decode(response.responseText));
save the model:
record.save()
reload the store:
geographyMasterStore.load()

node.updateInfo is not a function while appending node in extjs

I am trying to load data into an extjs 4 TreeStore but while appending node, I am getting node.updateInfo is not a function error.
My model classes are as follows :
Dimension.js
Ext.define('ilp.model.Dimension', {
extend : 'Ext.data.Model',
require : [
'ilp.model.DimensionLevel'
],
fields : [
'actualName',
'displayName'
],
hasMany : {model : 'ilp.model.DimensionLevel', name : 'dimensionLevels'}
});
DimensionLevel.js
Ext.define('ilp.model.DimensionLevel', {
extend : 'Ext.data.Model',
fields : [
{name : 'name', type : 'string'},
{name : 'totalTrainees', type : 'int'}
]
});
and tree store code is as follows :
Ext.define('ilp.store.DimensionTree', {
extend : 'Ext.data.TreeStore',
requires : [
'ilp.model.Dimension',
'ilp.model.DimensionLevel'
],
model : 'ilp.model.Dimension',
root: {
name: 'Dimensions'
},
proxy: {
type: 'ajax',
url: 'http://localhost:8080/pentaho/content/cda/doQuery',
reader: {
type: 'pentahoReader',
root: 'resultset'
},
extraParams: {
path: 'RINXDashboards%2FCDAs%2FILP_Employee_Qeries.cda',
dataAccessId:'Get_All_Levels_From_All_Dimensions',
userid : 'joe',
password : 'password'
}
},
listeners: {
append : function(parentNode, newNode, index, options) {
if(newNode.get('text') != 'Root') {
console.log('newNode text value = ' + newNode.get('text'));
newNode.set('checked', null);
newNode.set('expandable', true);
if(Ext.ClassManager.getName(newNode) == "ilp.model.Dimension") {
newNode.set('expanded', true);
newNode.set('text', newNode.get('displayName'));
if(newNode.dimensionLevels().getCount() > 0) {
newNode.dimensionLevels().each(function(level) {
newNode.appendChild(level);
});
} else {
newNode.set('leaf', true);
}
}else if(Ext.ClassManager.getName(newNode) == "ilp.model.DimensionLevel") {
newNode.set('leaf', true);
newNode.set('text', newNode.get('name'));
}
}
}
}
});
I am getting above error on following line :
newNode.dimensionLevels().each(function(level) {
while debugging I have found that updateInfo() method of newNode is undefined.
Can anyone please tell me why this error is coming? I am totally clueless now !!!
May this is caused by the bug EXTJSIV-6051
see Sencha Forum for further infos
I think your problem comes from :
root: {
name: 'Dimensions'
},
root attribute must be of type: Ext.data.Model/Ext.data.NodeInterface/Object. So try to replace 'root' attribute by this:
root: {
text: "Dimensions",
leaf: false
}
Check Sencha doc for more information: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-cfg-root

How to use inner properties of a JSON response with Sencha Proxy

The JSONP proxy is largely working for me, but I need to set properties of a model based on some nested properties in the JSON response. I can't figure how to do this without extending the Reader class, but thought there might be an easier way that I'm just missing.
My Recipe model:
Ext.define('NC.model.Recipe', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'preparationText', type: 'string' },
{ name: 'ingredientsText', type: 'string' },
{ name: 'servings', type: 'string' }
]
}
});
My Store:
Ext.define('NC.store.Recipes', {
extend: 'Ext.data.Store',
config: {
model: 'NC.model.Recipe',
storeId: 'Recipes',
proxy: {
type: 'jsonp',
url: 'http://anExternalSite.com/api',
callbackKey: 'callback',
filterParam: 'text',
extraParams: {
type: 'Recipe'
},
reader: {
type: 'json',
idProperty: 'uuid',
}
}
}
});
The JSON format:
[
{
uuid: "/UUID(XXXX)/",
name: "Spicy Peanut Noodle Salad",
image: "http://someplace.com/noodle-salad.jpg",
properties: {
preparationText: "Make it all nice and stuff",
ingredientsText: "Heaps of fresh food",
servings: "serves 4",
}
},
{ ... },
{ ... }
]
I would like those 3 'properties' - preparationText, ingredientsText, and servings, to be placed in the model, but currently only id, name, and image are. What is the method to make this work? If it does involve extending the Reader class, some direction would be great.
Thanks.
You can change your code like this to access nested values
{ name: 'preparationText', type: 'string', mapping: 'properties.preparationText' },
This mapping path should start excluding the root element.

ExtJs4 Model with different poxy url's

I have defined a model which I want to use twice but with a different url int he proxy (in fact only the id differs) But how can I manage this?
Ext.define('TesterModel', {
extend: 'Ext.data.Model',
autoLoad: false,
fields: [
{ name: 'prename', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'dept', type: 'string' },
{ name: 'rackName', type: 'string' },
{ name: 'rackIP' , vtype:'IPAddress'}],
proxy: {
type: 'ajax',
url: 'php/getData_db.php?id=',
reader: {
type: 'json',
messageProperty: 'message',
root: 'data',
}
},
constructor: function() {
UrlParams=document.URL.split("?");
if(UrlParams.length > 1) {
SingleUrlParams=Ext.Object.fromQueryString(UrlParams[1]);
this.proxy.url = this.proxy.url + SingleUrlParams.right;
console.log(this.proxy.url);
}
return this;
}});
Ext.ModelMgr.getModel('TesterModel').load(0, { // load user with ID of "0"
success: function(tester) {
var rightPanel=Ext.getCmp('rightTester');
rightPanel.loadRecord(tester); // when tester is loaded successfully, load the data into the form
}
});
I thought that the constructor will be done before loading, but nope, it is done after. It's weired to me.
Any hints, please?
(the main URL it's like: .../index.html?left=xx&right=yy )
so I want to fill up a panel on the left with the one id, and a panel on the right window side eith th right id.
Thanks!
Try .getProxy().url = "what/ever.php"