I receive an array of strings from the server.
How can I populate my grid panel if the data is not in key-value format?
Here is the response:
{"result":true,"data":["dep1","dep2","dep3"],"totalCount":3}
Here is my grid panel
xtype: 'gridpanel',
flex: 1,
itemId: 'departmentsGridPanel',
title: '',
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'department'
],
proxy: {
type: 'ajax',
url: 'FilteringDataServlet?filterColumn=avdeling',
reader: {
type: 'json',
root: 'data'
}
}
}),
columns: [{
text: 'Avdeling',
flex: 1,
dataIndex: 'department'
}],
Then you should use Ext.data.reader.Array with mapping parameter.
Employee = Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 0}, // "mapping" only needed if an "id" field is present which
{name: 'occupation', mapping: 1} // precludes using the ordinal position as the index.
]
});
I have solved this by adding load listener to my store and modifying the data there
listeners: {
load: function(store, records, success, opts) {
store.each(function(record) {
record.set('department', record.raw);
});
}
}
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'}
]
}
});
I am working in extjs4 MVC structure and I have been facing problem in extjs4
all the fields are submitting to server side but I want to send only some fileds of model class to server side. How can I get this output?
1) Here is my model class
Ext.define('ab.model.sn.UserModel',{
extend: 'Ext.data.Model',
//idproperty:'userId',//fields property first position pk.
fields: ['userId','firstName','middleName','lastName','languageId','primaryEmail','birthDate','password','securityQuestionId','securityQuestionAnswer','isMale','creationTime','ipAddress','confirmationCode','userStatusId',],
proxy:
{
type:'ajax',
//type:'localstorage',
//id:'users',
api:
{
read:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin',
create:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin122',
update:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin123'
},//end of api
reader:
{
type:'json',
},//end of reader
writer:
{
type:'json',
root:'records',
},//End of writer
}//end of proxy
});
2) Here is my some controller file code
var userObject = Ext.ModelManager.create(
{
firstName:record.get('firstName'),
password:record.get('password'),
},'ab.model.sn.UserModel');
userObject.save({
success: function(record, operation)
{
console.log("registration successssssssssss "+record.get('userId'));
},//End of success function
failure: function(record, operation)
{
console.log("Inside failure functionnnnn");
},//End of failure function
callback: function(record, operation)
{
console.log("Inside callback functionnnnnn");
}//End of callback function
});// End of check save function
3) And data would be going in json format
{"records":{"userId":"","firstName":"ram","middleName":"","lastName":"","languageId":"","primaryEmail":"","birthDate":"","password":"sham","securityQuestionId":"","securityQuestionAnswer":"","isMale":"","creationTime":"","ipAddress":"","confirmationCode":"","userStatusId":"","id":null}}
4) But I want to send only firstName and password.I dont want send all fields. how can I send the data to server side.
I want json in this format
{"records":{"firstName":"ram","password":"sham"}}
please give me some suggestions....
You just need to overwrite the getRecordData function of the writer. Like this.
writer:
{
type:'json',
root:'records',
getRecordData: function (record) { return {"firstName" :record.data.firstName,"password": record.data.password}; },
},
nscrob's answer has less coding so it may be preferred, but there is also a built-in config for this on the model: persist: false. It keeps the model field from being sent to the server side.
IMHO the model configs don't seem to get used as well as they should even in the sencha examples (or maybe because they are not used in the sencha examples). I think it also saves a miniscule amount of resources if you define the data types in the model as opposed to letting the client work it out, for example:
Ext.define('ab.model.sn.UserModel',{
extend: 'Ext.data.Model',
//idproperty:'userId',//fields property first position pk.
// using field type definitions and explicit persistance
fields: [
{name: 'userId', type: 'int', persist: false},
{name: 'firstName', type: 'string'},
{name: 'middleName', type: 'string', persist: false},
{name: 'lastName', type: 'string', persist: false},
{name: 'languageId', type: 'int', persist: false},
{name: 'primaryEmail', type: 'string', persist: false},
{name: 'birthDate', type: 'date', dateFormat: 'c', persist: false},
{name: 'password', type: 'string'},
{name: 'securityQuestionId', type: 'int', persist: false},
{name: 'securityQuestionAnswer', type: 'string',persist: false},
{name: 'isMale', type: 'bool', persist: false},
{name: 'creationTime', type: 'date', dateFormat: 'c', persist: false},
{name: 'ipAddress', type: 'string', persist: false},
{name: 'confirmationCode', type: 'string', persist: false},
{name: 'userStatusId', type: 'int', persist: false}
],
proxy:
{
type:'ajax',
//type:'localstorage',
//id:'users',
api:
{
read:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin',
create:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin122',
update:'http://localhost/balaee/Balaee/index.php/SocialNetworking/user/AuthenticateLogin123'
},//end of api
reader:
{
type:'json',
},//end of reader
writer:
{
type:'json',
root:'records',
},//End of writer
}//end of proxy
});
Like I said, there is some more coding but I thought I would throw this out there as the built-in handling for this scenario (instead of the override). You could also drop the field type definitions if you wanted, they aren't required to define the persist property.
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.
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'}
]
});