sencha touch local storage insert ID - html

I have a small problem if you can help me it would be great. I cant insert my own ID to the local storage.
ext.define('EMC.model.ReferenceData', {
extend: 'Ext.data.Model',
config: {
identifier: {
type: 'simple'
},
idProperty: 'Id',
fields: [
{name: 'Id', type: 'string'},
{name: 'Description', type: 'string'},
{name: 'syncChangeVersion', type: 'integer', mapping: 'SysChangeVersion'},
{name: 'TypeEnum', type: 'string'}
]
}
});
this is a model of my project and the store is shown below.
Ext.define("EMC.store.SyncReferenceData", {
extend : "Ext.data.Store",
requires : [ 'Ext.data.proxy.LocalStorage' ],
config : {
model : 'EMC.model.ReferenceData',
storeId : 'referenceStore',
sorters : 'Id',
proxy : {
type : 'localstorage',
id : 'reference_data'
},
autoSync : true,
autoLoad : true
}
});
this is the phrase I created to insert data to the local storage using controller.
var frmModel2 = Ext.create('EMC.model.ReferenceData',{
Id : '13',
Description : 'lole',
syncChangeVersion : 0,
TypeEnum : '199'
});
ReferenceStore.add(frmModel2);
ReferenceStore.sync();
But when I see the local storage it is empty. But If i comment Id : '13' then it will add to the local storage with a id of "ext-record-293".
why cant I inset my own Id to the store?

Try like this..
Ext.define('EMC.model.ReferenceData', {
extend: 'Ext.data.Model',
config: {
dProperty : 'uniqueid', // dummy name(not a field)
clientIdProperty : 'Id',
fields: [
{name: 'Id', type: 'string'},
{name: 'Description', type: 'string'},
{name: 'syncChangeVersion', type: 'integer', mapping: 'SysChangeVersion'},
{name: 'TypeEnum', type: 'string'}
]
}
});

Related

Multiple hasMany associations within one model

I have the following JSON structure:
{
orderId : '00410',
name : 'Zuiger',
productionQuantity : '4',
materials : [
{
materialId : 'ALU.BALK.10X70',
description : 'Aluminium balk 10 x 70',
quantityPP : '70mm',
totalQuantity : '0.4'
},
{
materialId : 'ALU.BALK.10X70',
description : 'Aluminium balk 10 x 70',
quantityPP : '70mm',
totalQuantity : '0.4'
}],
operations : [
{
operationId : 'ZAGEN',
lineNr : '10',
description : 'Zagen groot',
started : false
},
{
operationId : 'FR003',
lineNr : '20',
description : 'Frezen Heidenhein',
started : true
}]
}
So i have an Order, which has a list of materials and/or a list of operations. This JSON is currently in a Store file using the Data tag and is autoLoaded. This is for testing purposes.
The model used for this is Order which contains 2 hasMany associations to material and operation:
Ext.define('wp-touch.model.Order', {
extend: 'Ext.data.Model',
requires: [
'wp-touch.model.Material',
'wp-touch.model.Operation'
],
config: {
idProperty: 'Id',
fields: [
{ name: 'orderId', type: 'string'},
{ name: 'name', type: 'string'},
{ name: 'productionQuantity', type: 'string'},
],
associations: [
{
type: 'hasMany',
associationKey: 'materials',
model: 'wp-touch.model.Material',
name: 'material',
primairyKey: 'materialId',
foreignKey: 'orderId'
},
{
type: 'hasMany',
associationKey: 'operations',
model: 'wp-touch.model.Operation',
name: 'operation',
primairyKey: 'operationId',
foreignKey: 'orderId'
}
],
}});
When the store is loaded it only loads the first hasMany. When i empty the materials array in the JSON message it loads in the operations just fine. So it seems it only loads one of the hasMany associations. Is there any way to fix this?
Here are the material and operation models;
Ext.define('wp-touch.model.Material', {
extend: 'Ext.data.Model',
config: {
idProperty: 'Id',
fields: [
{ name: 'materialId', type: 'string'},
{ name: 'description', type: 'string'},
{ name: 'quantityPP', type: 'string'},
{ name: 'totalQuantity',type: 'string'},
{ name: 'orderId', type: 'string'}
],
belongsTo: [
{
model: 'wp-touch.model.Order',
name: 'order',
primairyKey: 'materialId',
foreignKey: 'orderId'
}
]
}});
Ext.define('wp-touch.model.Operation', {
extend: 'Ext.data.Model',
config: {
idProperty: 'Id',
fields: [
{ name: 'operationId', type: 'string'},
{ name: 'lineNr', type: 'int'},
{ name: 'description', type: 'string'},
{ name: 'started', type: 'boolean'},
{ name: 'orderId', type: 'string'}
],
belongsTo: [
{
model: 'wp-touch.model.Order',
name: 'order',
primairyKey: 'operationId',
foreignKey: 'orderId'
}
]
}});

Cannot load stores using jsonp extjs4.1

I am trying to load ext data stores using jsonp. The below code is working fine when i am using ajax and making requests on the same domain.
The store definition:
var baseUrl = 'http://localhost:8090/';
Ext.define('Ktimatologio.store.NewWholeBlockStore', {
extend: 'Ext.data.Store',
alias: 'widget.newsingleblockstore',
requires: ['Ktimatologio.model.NewWholeBlockModel'],
model: 'Ktimatologio.model.NewWholeBlockModel',
groupField: 'search_tag',
fields: [
{name:'id', mapping:'id'},
{name:'id1', mapping:'id1'},
{name: 'text', mapping: 'text'},
{name: 'title', mapping: 'title'},
{name: 'fek', mapping: 'fek'},
{name: 'date', mapping: 'date'},
{name: 'descr', mapping: 'description'},
{name: 'model', mapping: 'model'},
{name: 'body', mapping: 'body'},
{name: 'type', mapping: 'type'},
{name: 'history', mapping: 'history'},
{name: 'src', mapping: 'url'},
{name: 'search_tag', mapping: 'search_tag'},
{name: 'new_element', mapping: 'new_element'},
{name: 'new_table', mapping: 'new_table'}
],
autoLoad: true,
proxy: {
//type:'ajax',
type:'jsonp',
url: baseUrl + 'openbd/ktimatologio-final/resources/cfScripts/nea_stoixeia/GetNewTables.cfc?',
extraParams: {
method: 'getNewTables'
},
reader:{
type: 'json',
root: 'data'
}
}
When i run the code i see an error on firebug:
SyntaxError: invalid label
{"data":[{"id":"1_n_2308_1995","id1":1,"title":"Άρθρο 1&nbspΦΕΚ Α΄ 114&nbsp15.6....
GetNew...llback2 (line 1, column 1)
I am stuck!
Any help is much appreciated!
Tom
Greece
JSONP service must actually return a function call not just JSON back. Google for some examples.

Loading associations and binding grid to form

I've asked a similar question before, here: https://stackoverflow.com/questions/11707007/nested-json-form-submits-in-extjs4-getting-the-writer-to-remap-the-fields
Also asked in the Sencha forums, am pretty desperate:
I have many problems with reading and writing nested json files into an associated model.
I will write all the code that I can here, in the hope that some of you will find what I'm doing wrong.
Questions are emphasized in the text.
The json I am receiving looks like this, and can not be changed: tests:
[
{
"name":"qwerty",
"id":"1",
"uid":"1",
"created":"1341481071",
"changed":"1343804076",
"status":"1",
"jmeterOptions":{
"jmx":"\/files\/20141\/multi.jmx",
"engines":"0",
"version":"2.5.1",
"consoleArgs":" -t sample.jmx -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"engineArgs":" -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"instanceType":"m1.medium",
"overrideOptions":{
"threads":"50",
"rampUpTime":"300",
"iterations":"-1",
"duration":"-1"
}
},
"testOptions":{
"type":"BM_TEST_TYPE_AUTO",
"geo":"us-east-1",
"timeout":"1",
"reportByEmail":"1",
"launchTime":"0",
"sessionId":"",
"hosts":null,
"privateIps":null
},
"autoOptions":{
"users":"10",
"delay":"10",
"rampUpTime":"1800",
"pages":[
{
"label":"sencha",
"url":"http:\/\/sencha.com"
}
]
},
"seleniumOptions":{
"pages":[
{
"label":"sencha",
"url":"http:\/\/sencha.com"
}
]
}
},
{
"name":"Instant Load test",
"id":"2",
"uid":"1",
"created":"1336921297",
"changed":"1341132949",
"status":"1",
"jmeterOptions":{
"jmx":null,
"engines":"0",
"version":"2.5.1",
"consoleArgs":" -t sample.jmx -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"engineArgs":" -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"instanceType":"m1.medium",
"overrideOptions":null
},
"testOptions":{
"type":"BM_TEST_TYPE_AUTO",
"geo":null,
"timeout":"1",
"reportByEmail":"0",
"launchTime":"0",
"sessionId":"",
"hosts":null,
"privateIps":null
},
"autoOptions":{
"users":"10",
"delay":"10",
"rampUpTime":"1800",
"pages":[
{
"label":"",
"url":"http:\/\/cnn.com"
}
]
},
"seleniumOptions":{
"pages":[
{
"label":"",
"url":"http:\/\/cnn.com"
}
]
}
}
]
The model looks like this:
Ext.define('BM.model.Test', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'id'},
{name: 'uid', type: 'mumber'},
{name: 'created', type: 'date', dateFormat: 'timestamp'},
{name: 'changed', type: 'date', dateFormat: 'timestamp'},
{name: 'status', type: 'number'},
{name: 'jmeterJmx', mapping: 'jmeterOptions.jmx', type: 'string'},
{name: 'jmeterEngines', mapping: 'jmeterOptions.engines', type: 'number'},
{name: 'jmeterVersion', mapping: 'jmeterOptions.version', type: 'string'},
{name: 'jmeterConsoleArgs', mapping: 'jmeterOptions.consoleArgs', type: 'string'},
{name: 'jmeterEngineArgs', mapping: 'jmeterOptions.engineArgs', type: 'string'},
{name: 'jmeterInstanceType', mapping: 'jmeterOptions.instanceType', type: 'string'},
{name: 'testOptionsType', mapping: 'testOptions.type', type: 'string'},
{name: 'testOptionsGeo', mapping: 'testOptions.geo', type: 'string'},
{name: 'testOptionsTimeout', mapping: 'testOptions.timeout', type: 'number'},
{name: 'testOptionsReportByEmail', mapping: 'testOptions.reportByEmail', type: 'string'},
{name: 'testOptionsLaunchTime', mapping: 'testOptions.launchTime', type: 'string'},
{name: 'testOptionsSessionId', mapping: 'testOptions.sessionId', type: 'string'},
{name: 'testOptionsHosts', mapping: 'testOptions.hosts', type: 'string'},
{name: 'testOptionsPrivateIps', mapping: 'testOptions.privateIps', type: 'string'},
{name: 'autoUsers', mapping: 'autoOptions.users', type: 'number'},
{name: 'autoDelay', mapping: 'autoOptions.delay', type: 'number'},
{name: 'autoRampUpTime', mapping: 'autoOptions.rampUpTime', type: 'number'}
],
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions.pages'},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions.pages'}
],
proxy: {
type: 'ajax',
api: {
read: '../webapp/get/tests',
update: '../webapp/set/test'
},
reader: {
type: 'json',
root: 'tests',
successProperty: 'success'
},
writer: new Ext.data.JsonWriter({
encode: false,
writeAllFields: true,
getRecordData: function (record) {
Ext.apply(record.data,record.getAssociatedData(true));
return record.getAssociatedData(true);
}
})
}
});
Ext.define('Pages', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'url', type: 'string'}
]
});
First Question: Including the following four lines causes the grid to load empty, why?
{name: 'jmeterOverrideThreads', mapping: 'jmeterOptions.overrideOptions.threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'jmeterOptions.overrideOptions.rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'jmeterOptions.overrideOptions.iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'jmeterOptions.overrideOptions.duration', type: 'number'},
Second Question: The associated data comes up empty. rawData has the json as shown above, how do I make getAssociatedData to fill in the correct data?
Better yet, Why aren't my associations working?
Third Question: The writer now only sends the empty associated data, how do I send all data, exactly as I received it?
My solution to this is dead ugly:
updateTest: function(button) {
var form = button.up('panel');
var record = form.getRecord(),
values = form.getValues();
record.set(values);
var rd = record.data;
// this.getTestsStore().sync(); //No! Sends flattened data.
// var autoPages = record.getAssociatedData().autoPages; // Is currently empty
// var seleniumPages = record.getAssociatedData().seleniumPages; // Is currently empty
var autoPages = [];
var seleniumPages = [];
var iterator = 0;
var autoPagesLabel = record.data['autoPagesLabel' + iterator];
var autoPagesUrl = record.data['autoPagesUrl' + iterator];
while (autoPagesLabel != undefined){
autoPages.push({
'label': autoPagesLabel,
'url': autoPagesUrl
});
iterator++;
autoPagesLabel = record.data['autoPagesLabel' + iterator];
autoPagesUrl = record.data['autoPagesUrl' + iterator];
}
iterator = 0;
var seleniumPagesLabel = record.data['seleniumPagesLabel' + iterator];
var seleniumPagesUrl = record.data['seleniumPagesUrl' + iterator];
while (seleniumPagesLabel != undefined){
seleniumPages.push({
'label': seleniumPagesLabel,
'url': seleniumPagesUrl
});
iterator++;
seleniumPagesLabel = record.data['seleniumPagesLabel' + iterator];
seleniumPagesUrl = record.data['seleniumPagesUrl' + iterator];
}
var reformattedJson = {
"name": rd.name,
"id": rd.id,
"uid": rd.uid,
"created": rd.created,
"changed": rd.changed,
"status": rd.status,
"jmeterOptions":{
"jmx": rd.jmeterJmx,
"engines": rd.jmeterEngines,
"version": rd.jmeterVersion,
"consoleArgs": rd.jmeterConsoleArgs,
"engineArgs": rd.jmeterEngineArgs,
"instanceType": rd.jmeterInstanceType,
"overrideOptions": {
"threads": rd.jmeterOverrideThreads,
"rampUpTime": rd.jmeterOverrideRampUpTime,
"iterations": rd.jmeterOverrideIterations,
"duration": rd.jmeterOverrideDuration
}
},
"testOptions":{
"type": rd.testOptionsType,
"geo": rd.testOptionsGeo,
"timeout": rd.testOptionsTimeout,
"reportByEmail": rd.testOptionsReportByEmail,
"launchTime": rd.testOptionsLaunchTime,
"sessionId": rd.testOptionsSessionId,
"hosts": rd.testOptionsHosts,
"privateIps": rd.testOptionsPrivateIps
},
"autoOptions":{
"users": rd.autoUsers,
"delay": rd.autoDelay,
"rampUpTime": rd.autoRampUpTime,
"pages": autoPages
},
"seleniumOptions":{
"pages":seleniumPages
}
};
Ext.Ajax.request({
url: '../webapp/set/test',
method:'Post',
jsonData: reformattedJson,
success: function(response){
var text = response.responseText;
// process server response here
console.log('Post successfull! ');
}
});
}
This is the form:
Ext.define('BM.view.test.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',
layout: 'anchor',
title: 'Edit Test',
defaultType: 'textfield',
items: [
{name: 'id', hidden: true},
{name: 'name', fieldLabel: 'Name'},
{name: 'status', fieldLabel: 'Status'},
{name: 'testOptionsType', fieldLabel: 'Type'},
{name: 'autoUsers', fieldLabel: 'User count'}
],
buttons: [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
});
This is what calls the form: (Clicking on a grid row)
editTest: function(grid, record) {
var view = Ext.widget('test-edit');
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var autoPages = record.raw.autoOptions.pages;
var seleniumPages = record.raw.seleniumOptions.pages;
for (var i =0; i < autoPages.length; i++){
var tf = Ext.create('Ext.form.field.Text', {
id: 'autoPagesLabel' + i,
name: 'autoPagesLabel' + i,
fieldLabel: 'Label',
value: autoPages[i].label,
columnWidth:0.5
});
view.add(tf);
tf = Ext.create('Ext.form.field.Text', {
id: 'autoPagesUrl' + i,
name: 'autoPagesUrl' + i,
fieldLabel: 'Url',
value: autoPages[i].url,
columnWidth:0.5
});
view.add(tf);
}
view.loadRecord(record);
viewPort.layout.centerRegion.removeAll();
viewPort.layout.centerRegion.add(view);
}
I tried following the MVC architecture of Ext JS 4, note by note from the tutorials, and failed miserably.
What am I doing wrong?
Do you need any other information or pieces of code? Just tell me and I'll post them.
I found a solution that works for some of my questions.
As a bypass to my first question, I find that mapping of more than two levels is problematic, so I added a hasOne relationship. I don't think it's a good solution, but have no others, would love a comment about this.
{name: 'jmeterOverrideThreads', mapping: 'jmeterOptions.overrideOptions.threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'jmeterOptions.overrideOptions.rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'jmeterOptions.overrideOptions.iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'jmeterOptions.overrideOptions.duration', type: 'number'},
from the model, becomes:
hasOne: [
{model: 'OverrideOptions', associationKey: 'jmeterOptions', reader: {root: 'overrideOptions'}}
],
// and:
Ext.define('OverrideOptions', {
extend: 'Ext.data.Model',
fields: [
{name: 'jmeterOverrideThreads', mapping: 'threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'duration', type: 'number'}
]
});
As for my second question about the associations not working:
In my model, instead of:
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions.pages'},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions.pages'}
],
I added:
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions', reader: {root: 'pages'}},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions', reader: {root: 'pages'}}
],
Suddenly, I am able to access my data from record.getAssociatedData(), it is still flattened, but at least I have the data.
I still don't have a good idea about having the writer output the data in its original format other than writing it as I did in brute force.
Would again love some feedback on that.
Other questions arose:
I want my associated data to be added to a form. As we are talking about arrays of objects, we don't know how many there will be, is there a better way to create the form from associated data than the one I used in my original question. Is there a better way to access the form data, other than naming the fields with a running iterator: a1, a2,...
Thanks in advance for any answer.

Binding json data into store ubsing extjs

i have json data like this
{"GetStudentDetails":
{"TotalCount":5,
"RootResults":[
{"city":"West Chester","country":"USA","state":"PA ","student_id":100},
{"city":"Philly","country":"USA","state":"PA","student_id":101},
{"city":"Buffalo","country":"USA","state":"NY","student_id":102},
{"city":"Naigra City","country":"USA","state":"NY","student_id":103},
{"city":"West Chester","country":"USA","state":"PA","student_id":104}]
}
}
How to get this data into a store?
i am trying using a model like this.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'TotalCount' }
],
hasMany: [{ model: 'RootResults', name: 'RootResult'}]
});
Ext.define("RootResults", {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'city' },
{ type: 'string', name: 'country' },
{ type: 'string', name: 'state' },
{ type: 'string', name: 'student_id' }
],
belongsTo: 'User'
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json'
}
}
});
How should my model be? when i am giving some more simple json i am getting the store loaded. i think the problem is with mapping?
Define model as
Ext.define("RootResults", {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'city' },
{ type: 'string', name: 'country' },
{ type: 'string', name: 'state' },
{ type: 'string', name: 'student_id' }
],
});
And inside the reader definition add two parameters:
root: 'GetStudentDetails.RootResults'
totalProperty: 'GetStudentDetails.TotalCount'
Something like that... Main idea - don't try to bring internal JSON structure to your model - it should be reader responsibility to properly parse it.

Sencha Touch - access 1 to 1 model relationship

I'm trying to access the following JSON from my model store. I have no problem accessing the root (Name and Address) but i can't access anything in Financials (NetWorth or Income). I've verified the JSON below is being returned from the server.
I know this has to be super easy but every example I've seen is showing how to access a 1 to many relationship. My model is a 1 to 1. Person->Financials. Right now I don't have any associations setup as I don't know how to setup a 1 to 1 relationship. I've tried associations, I've tried belongsTo, I've tried Financials.NetWorth from inside my itemTPL. Nothing.
Can someone please show me the light?
JSON returned from server
[{
"PersonName": "John Smith",
"Address": "123 main street",
"Financials":
[{
"NetWorth": "$500,000",
"Income":"$67,000"
}]
}]
I registered my Models.
Ext.regModel('Person', {
fields: [
{name: 'Name', type:'string'},
{name: 'Address', type: 'string'},
],
});
Ext.regModel('Financials',{
fields: [
{name: 'NetWorth', type:'string'},
{name: 'Income', type: 'string'},
],
});
And registered the store
var commStore = new Ext.data.Store({
model: 'Person',
proxy: {
type: 'ajax',
url : 'Business/GetData',
reader: {
type: 'json',
}
},
autoLoad:false,
});
and displaying back in a list
var commList = new Ext.List({
fullscreen: false,
itemTpl : '<div>{PersonName}</div><div>{Business.NetWorth}</div>',
store: commStore,
height:500,
width:"100%",
});
Any help would be much appreciated.
Beginner myself too, but it seems follwing could help (not tested with your code)
Have only on model:
Ext.regModel('Person', {
fields: [
{name: 'Name', type:'string'},
{name: 'Address', type: 'string'},
{name: 'NetWorth', type:'string', mapping 'Financials.NetWorth'},
{name: 'Income', type: 'string', mapping 'Financials.Income'},
],
});
and in template code refer with the names
itemTpl : '<div>{PersonName}</div><div>{Business.NetWorth}</div>',
becomes
itemTpl : '<div>{PersonName}</div><div>{NetWorth}</div>',
You say that your relationship is 1-to-1, but your JSON data returns an array(with 1 item, but nonetheless an array, because you use "[]" brackets) for Financials.
This means that Person should become something like this:
Ext.regModel('Person', {
fields: [
{name: 'Name', type:'string'},
{name: 'Address', type: 'string'},
],
hasMany: [
{name: 'person', model: 'Person'}
]
});