Develop Reference

Save multiple models in loopback

I'm doing research on loopback and was wondering if it's possible to save to multiple models from one request. Say.. an Post has many Tags with many Images. A user form would have the following:
Post Title
Post Description
Tag Names (A multi field. E.g.: ['Sci-Fi', 'Fiction', 'BestSeller']
Image File (Hoping to process the file uploaded to AWS, maybe with skipper-s3?)
How would I be able to persist on multiple models like this? Is this something you do with a hook?

You can create RemoteMethods in a Model, which can define parameters, so in your example you could create something like this in your Post model:
// remote method, defined below
Post.SaveFull = function(title,
description,
tags,
imageUrl,
cb) {
var models = Post.app.Models; // provides access to your other models, like 'Tags'
Post.create({"title": title, "description": description}, function(createdPost) {
foreach(tag in tags) {
// do something with models.Tags
}
// do something with the image
// callback at the end
cb(null, {}); // whatever you want to return
})
}
Post.remoteMethod(
'SaveFull',
{
accepts: [
{arg: 'title', type: 'string'},
{arg: 'description', type: 'string'},
{arg: 'tags', type: 'object'},
{arg: 'imageUrl', type: 'string'}
],
returns: {arg: 'Post', type: 'object'}
}
);

Extjs 5.0 model POST values not received on server side (working Extjs 4.2)

I am upgrading our Extjs 4.2 app to Extjs 5.0.
I am able to bring up all the read only pages but i am getting issues when i try to update/save the data. I will really appreciate your help!!
My model data values are not showing up on the server side, i am able to print model with console.log(model) and it has all the values , but on the server side it only has id and all the other parameters are showing as null.
Here is proxy in the model :
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
id: 'user',
proxy: {
type: 'rest',
url : '/rest/update/user',
listeners: {
exception: function(proxy, response, operation) {
Ext.Msg.alert('Failed', 'Save the user Failed!');
}
}
},
fields: [
{name: 'id', type: 'int'},
{name: 'userName', type: 'string'},
{name: 'country', type: 'string'}
]
}
The controller :
onUserUpdateAction: function(button, event, action) {
var model = Ext.create('MyApp.model.User');
model.set('id', "123");
model.set('userName', "john");
model.set('country', "usa");
---
model.commit() / without commit() it does not add the id in URL like /user/123
model.save();
}
Here is the server side code :
#PUT
#Consumes({ "application/json" })
#Path("/Update/user/{id}")
updateUser(#PathParam("id") final int id, final User record);
First line log in the implementation class, id is there but all the other values are null
*** In updateUser() method, id : 123, record: User(id=123, **userName=null, country=null**)

The problem here is that you try to fool the Ext. You create new record with id - normally ids are assigned by the server. Therefore, you need to commit it to clear it phantom (new record) flag, so that Ext thinks it is already existing record. But, after commit, the record has no modified fields and, by default, only modified fields are sent to the server. Therefore, you need a writer configured, something like this:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'userName', type: 'string'},
{name: 'country', type: 'string'}
],
proxy: {
type: 'rest',
url : 'success.php',
listeners: {
exception: function(proxy, response, operation) {
Ext.Msg.alert('Failed', 'Save the user Failed!');
}
}
,writer:{
type:'json'
,writeAllFields:true
}
}
});

Process extjs store proxy data after data recieved

I am using extjs sencha store for storing data. I make a proxy call to a web-service to get data. I refresh the data using store.load() function.
I am looking to edit the data that is received before it is given to the grid.
I know about the load event, but this function is executed after the load is completed and data is populated with the current data.
listeners : {
'load' : function(store,records, options) {
}
},
I am looking to see how I can edit the returned data from web-service before it is assigned to the store. Basically data returned from my webservice is in different format than the format we give to extjs datagrid. So, want to do a data operation before we give to the grid. Hope we can do this.
Thx

Model mappings can help you do this. There is a conversion function that can be supplied as well. Here is the example from the docs:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{
name: 'firstName',
convert: function(value, record) {
var fullName = record.get('name'),
splits = fullName.split(" "),
firstName = splits[0];
return firstName;
}
},
'name', 'email',
{name: 'age', type: 'int'},
{name: 'gender', type: 'string', defaultValue: 'Unknown'}
]
});

Initializing a store's data in Extjs

I have store that I would like to initialize from a database but I couldn't find a standard init method for the Ext.data.Store. I found a couple of examples with the StoreManager component, but I think that's not what I'm looking for. I have an MVC structure for my app and I'd like to keep it, I only want to initialize my store's data field using a method I define. Could someone explain how to do so?

I either understand you wrong or your question is straight forward. You configure a store with a model like this. That's all. You may just chose a provider(reader/writer) that fit your needs.
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
Ext.define('YourMVCNameSpace.data.UserStore', {
extend: 'Ext.data.Store',
constructor: function (config) {
config = Ext.Object.merge({}, config);
var me = this;
// do what you need with the given config object (even deletes) before passing it to the parent contructor
me.callParent([config]);
// use me forth on cause the config object is now fully applied
},
model: 'User',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
Note that the reader will expect a Json result like this:
{"total": 55, "users":["...modeldata.."]}
and is referring to a url like
http://localhost/YourAppDomain//users.json
Place the store as 'User' within the controller store array and retrieve it within the Controller by calling getUserStore() or directly from the Ext.StoreMgr using Ext.StoreMgr.lookup('User');
Note that by convention the Controller (MVC) will override any storeId you set on the store and will just use the name.

EXTJS + Updating a store with the database ID after saving a grid

I'm trying to learn how to use the EXTJS grids for some simple CRUD operations over a table in a admin app.
I have a simple grid that allows someone to edit users, the store is defined as:
var userDataStore = new Ext.data.Store({
id: 'userDataStore',
autoSave: false,
batch: true,
proxy: new Ext.data.HttpProxy({
api: {
read: '/Admin/Users/All',
create: '/Admin/Users/Save',
update: '/Admin/Users/Save'
}
}),
reader: new Ext.data.JsonReader(
{
root: 'Data',
idProperty: 'ID',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
}, [
{ name: 'ID', type: 'string', allowBlanks: false },
{ name: 'NT_ID', type: 'string', allowBlank: false },
{ name: 'EMail', type: 'string', allowBlank: false },
{ name: 'Name', type: 'string', allowBlank: false },
{ name: 'Enabled', type: 'bool', allowBlank: false },
{ name: 'CurrentRoleCode', type: 'string', allowBlank: false}]
),
writer: new Ext.data.JsonWriter(
{
encode: false,
writeAllFields: true,
listful: true
})
});
This is bound to a grid, and I am able to load and save users without issue. The save button looks like this:
var saveButton = new Ext.Button({
text: 'Save',
disabled: true,
handler: function() {
userDataStore.save();
pageState.ClearDirty();
saveButton.disable();
}
});
However, when creating a new user, the JSON POST for the user is posted to the same REST service end point as "Update", with the only difference being that no ID value is posted (as one is only set in the store when loading from the server).
This works, and I am able to create users.
The save REST service emits back the created row with the new database ID, and I was under the assumption that EXTJS would automatically bind the new generated database ID to the row. This allows the user to further edit that row, and cause an update instead of a insert.
Instead, the row continues to have a blank user ID, so an additional save creates another new user.
So either:
EXTJS is supposed to resolve generated row ID's automatically and I am just doing something wrong.
I am supposed to manually reload the grid after each save with an additional REST call.
I've been looking at EXTJS documentation and forums, but I am unclear on the proper approach.
Can someone clarify?
EDIT: I tried returning Success = True in JSON to match the SuccessProperty, however this still didn't seem to work.
EDIT #2: So far the only thing I've found that works is doing "userDataStore.reload()" after saving, however because I was returning the contents of the store back after saving, I was hoping that EXTJS would understand that and update the row values.

I've got an idea that may help you. Let't suppose that user added a new
record in grid, in that moment add a new property newRecOrderNo to the record to
identify the record after response. When user will post data to server after
inserting you must get a new ID and associate it to newRecOrderNo
(like Map<Integer,Integer>). Then return json object like that :
{
success : true,
newIdes : {
1 : 23,
2 : 34
}
}
Then when you get response do set proper IDs to records:
userDataStore.each(function(rec){
if(rec.data.newRecOrderNo){
rec.data.ID = response.newIdes[rec.data.newRecOrderNo];
delete rec.data.newRedOrderNo;
}
})
})

Yes, it sets id (and also other fields, if server returns modified values of them), if create ajax backend returns record with set id, at least in extjs 4.1. You should return inserted record, with id set, under 'root' key as json dictionary, in this example root is 'Data', i.e.:
{
"Data": {
"ID": 8932,
"NT_ID": 28738273,
...
"CurrentRoleCode": "aaa",
},
"success": true
}

You need reload store with new params in savebtn handler
like
store.reload();
of course you can add more params to load action