We Keep Coding

Ext JS associations between models

Sencha Fiddle
My API returns JSON object visible in Attachments.store.Attachments data. It seems to me that the structure consists of 4 models: AttachmentObject, AttachmentDef, AttachmentFile and AttachmentNote. I've defined them in the fiddle and associated each other using hasOne and hasMany. I've also created a simple grid and a form.
In the grid I want to present attachment's name in the last column, but I can't access child nodes using dataIndex property. When passing only "attachmentDef" as dataIndex grid converts child to "[object Object]" string, which means the nested data is noticable by the grid. I've also tried to retrieve the name using renderer, but then sorting functionality is gone.
API expects same JSON format in case of posting a new attachment. How to instantiate above models and bind chosen model fields (i.e. name and note) with form fields?

here's the fiddle with child nodes and sort: https://fiddle.sencha.com/#view/editor&fiddle/257b
I've changed the store load and I've used 'templatecolumn' and 'widgetcolumn' to show data.
the creation of a new attachment depends on how you'd like to make it work, I suppose you might want to call a specific ws (defined in attachment model) to create a new attachment and then reload the grid's store

KnockoutJS: Update/Insert data to a viewModel using mapping

I've been trying to figure this out for quite some time now. I couldn't find anything that addresses this problem, but please correct me if I'm wrong.
The problem:
I have data from a JSON API comming in, with an nested array/object structure. I use mapping to initially fill the model with my data. To update this, I want to extend the model if new data arrives, or update the existing data.
As far as I found out, the mapping option key, should do this trick for me, but I might have misunderstood the functionality of the mapping options.
I've boiled down the problem to be represented by this example:
var userMapping = {
key: function(item) {
return ko.utils.unwrapObservable(item.id);
}
};
// JSON call replaced with values
var viewModel = {
users: ko.mapping.fromJS([], userMapping)
};
// Should insert new - new ID?
ko.mapping.fromJS([{"id":1,"name":"Foo"}, {"id":2,"name":"Bar"}], userMapping, viewModel.users);
// Should only update ID#1 - same ID?
ko.mapping.fromJS([{"id":1,"name":"Bat"}], userMapping, viewModel.users);
// Should insert new - New ID?
ko.mapping.fromJS([{"id":3,"name":"New"}, {"id":4,"name":"New"}], userMapping, viewModel.users);
ko.applyBindings(viewModel);​
Fiddle: http://jsfiddle.net/mikaelbr/gDjA7/
As you can see, the first line inserts the data. All good. But when I try to update, it replaces the content. The same for the third mapping; it replaces the content, instead of extening it.
Am I using it wrong? Should I try to extend the content "manually" before using mapping?
Edit Solution:
I solved this case by having a second helper array storing all current models. On new data i extended this array, and updated the view model to contain the accumulated items.
On update (In my case a WebSocket message), I looped through the models, changed the contents of the item in question, and used method valueHasMutated() to give notice of changed value to the Knockout lib.

From looking at your example code the mapping plugin is behaving exactly as I would expect it to. When you call fromJS on a collection you are effectively telling the mapping plugin this is the new contents of that collection. For example:
On the second line, How could it know whether you were updating or whether you had simply removed id:2?
I can't find any mention of a suitable method that treats the data as simply an update, although you could add one. Mapped arrays come with some helpful methods such as mappedIndexOf to help you find particular items. If you receive an update data set simply loop through it, find the item and update it with a mapping.fromJS call to that particular item. This can easily be generalized into reusable method.

You can use ko.mapping.updateFromJS() to update existing values. However, it does not add new values so that would be a problem in your instance. Take a look at the link below for more details.
Using updateFromJS is replacing values when it should be adding them

Yes, you should first collect all data into a list or array and then apply the mapping to that list. Otherwise you are going to overwrite the values in your viewModel.

How do I retrieve Extjs ArrayStore data?

I tried to find the answer a lot but no way. I have an Ext.data.ArrayStore store and want to get its data as string. I tried store.getRange(), store.getAt() but I couldn't figure out what these functions return. Is there any way to get ArrayStore data as string?
I am newbie to extjs, so if you have any example on this, I'd appreciate.

It really depends what you want to do with the data. For most UI widgets and that sort of thing, you'll want to just use the store directly. If you want to get a piece of data from the store for tweaking manually, that's a whole nother story.
store.getRange() will indeed return all of the records from the store, but they are returned as an Array of Record objects. Records contain an attribute called data which is an object containing any properties you defined in the record's config.
Example:
Ext.each(store.getRange(), function (item, idx, a) {
for (var i in item.data) {
console.log(item.data[i])
}
})
That should show you every item in every Record in store
EDIT: Changed my answer to not be totally wrong.

jqgrid load array data

I have a set of data like the following example and i would like to load it into the grid. However, i'm not sure how since the data doesn't have an name.
[[48803,"DSK1","","02200220","OPEN"],[48769,"APPR","","77733337","ENTERED"]]

What you need is just use the following localReader
localReader: {
repeatitems: true,
cell: "",
id: 0
}
I made for you the demo which shows live how it works.
UPDATED: How I could find out the reality is not so good as the documentation. The usage of localReader could help you to fill the grid contain with data from data parameter with the custom structure, but another parts of jqGrid: local sorting and searching don't work correct with this structure of data parameter. I interpret it as a bug. As a pragmatical solution I would recommend you to convert your custom data to array of named objects like
[{id:48803,col2:"DSK1",col3:"",col4:"02200220",col5:"OPEN"},
{id:48769,col2:"APPR",col3:"",col4:"77733337",col5:"ENTERED"}]
with the names corresponds to the column names in the colModel. If you will use data parameter in the form, everything will work perfect in jqGrid.
UPDATED 2: Look at the source of the fixed example and it will be clear what I mean. In your case conversion of the data can be about the following
var myNewData = [];
for (var i=0,l=mydata.length; i<l; i++) {
var d = mydata[i];
myNewData.push({id:d[0],col2:d[1],col3:d[2],col4:d[3],col5:d[4]});
}
The solution is not so elegant like with localReader, but it work without any restrictions.

Well, I'm not very familiar with jqgrid, but you could simply assign your data to an associative array and then load it.
Example here:
http://jsfiddle.net/QWcrT/

Dictionary Object confusion from jQuery to Django!

I'm attempting to send a dictionary from jQuery to Django using a getJSON call:
jQuery.getJSON(URL,JSONData,function(returnData){});
The JSONData object is formatted as follows:
JSONData = {
year:2010101,
name:"bob",
data:{
search:[jim,gordon],
register:[jim],
research:[dave],
}
}
This is put together programmatically but looks fine.
Once passed to Django the "year" and "name" objects are as expected. The data object however contains the following keys/values - "search[0]":"jim", "search[1]":"gordon","register[0]":"jim","research[0]":"dave", rather than the expected "search":(array of data), "register":(array of data), "research":(array of data).
Similar things happen if I use objects in place of the arrays.
Is this an issue with Django's interpretation of the object?
Any idea how I might correct this...cleanly?
EDIT:
I have now simplified the data to make testing easier:
JSONData = {
year:2010101,
name:"bob",
search:[jim,gordon],
register:[jim],
research:[dave],
}

request.GET is not an instance of a normal python dict, but of the django class QueryDict, that can deal with multiple values for one key. If you need multiple values for a key returned as a list you have to use getList!
EDIT: Also have a look at this jQuery parameter settings!