extjs searching deep into store data? - extjs

Question

In the Flex app, the metadata is loaded as xml which has very good functions for searching deep into the xml nodes. In the extjs version I have converted the xml data to json, keeping the deep hierarchical content, and am loading to an extjs Store using a json reader. I have not created a model, deeming this not necessary as the model does not add add any search functionality(?). I am looking at store.find, store.findBy which can use a function, store.findRecord etc, but these functions look very 'one-levelish'. I need to go to the 'Tabs' "node", find its child 'Tab' with 'Name' of 'Tab1', and find the value of its attribute 'Title' ... am using the description "node" but it is hierarchical json data. Am I missing store functionality that would do this, should I use the store's raw json data - does json have better search functionality, or shall I revert to brute-force javascript by looping through all the "nodes"? I was hoping to avoid looping and find a function of some kind. As always, tia

Answer 1

Well, what I understood from our comments is that you need a kinda storage to access your JSON data as quickly and easily as possible.
JSON means JavaScript Object Notation, so it's an object!
Ok, I give you two examples.
First of all, setup JSON data:
{
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
}
And now here we got two ways to follow:
First way: we can imagine the above JSON saved into a file called nested-json.json and we read it with a simple store. Than, we can use findBy search to find what we need:
var jstore = Ext.create ('Ext.data.Store', {
fields: ['id', 'name', 'age', 'skills'] ,
proxy: {
type: 'ajax' ,
url: 'nested-json.json' ,
reader: {
type: 'json' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
}
} ,
autoLoad: true
});
Ext.create ('Ext.button.Button', {
text: 'Push me' ,
renderTo: Ext.getBody () ,
handler: function (btn) {
var index = jstore.findBy (function (user, id) {
// Here's the hint
if (user.data.skills.skillLevel === 50) return id;
else return -1;
});
if (index != -1) {
// It will print 'foo' because it's the user
// that has the skillLevel equal to 50
console.log (jstore.getAt(index).get ('name'));
}
}
});
The other way is to imagine the above JSON as an object, read directly from a raw JSON data. At this point, just use it as a javascript object:
// Users model: required by JSON reader
Ext.define ('Users', {
extend: 'Ext.data.Model' ,
fields: ['id', 'name', 'age', 'skills']
});
// JSON reader
var jreader = Ext.create ('Ext.data.reader.Json', {
model: 'Users' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
});
// Reads records directly from raw JSON
var users = jreader.readRecords ({
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
});
// Here's the magic
Ext.each (users.records, function (user) {
console.log ('*** USER ***');
console.log (user);
console.log ('id: ' + user.get ('id'));
console.log ('name: ' + user.get ('name'));
console.log ('age: ' + user.get ('age'));
Ext.each (user.get ('skills'), function (skill) {
console.log ('*** SKILL ***');
console.log (skill);
console.log ('type: ' + skill.type);
console.log ('level: ' + skill.skillLevel);
console.log ('*** LEVELS ***');
Ext.each (skill.levels, function (level) {
console.log (level);
});
});
});
Here's a jsfiddle to test this last one: jsfiddle
I hope to have understood what you requested. If I didn't, please let me know with an example made by yourself ;)