extjs深入搜索商店数据？ [英] extjs searching deep into store data?
问题描述
在Flex应用程序中，元数据被加载为xml，它具有非常好的功能，用于深入搜索xml节点。在extjs版本中，我将xml数据转换为json，保持深层次的内容，并使用json读取器加载到extjs Store。我没有创建一个模型，认为这不是必需的，因为模型不添加添加任何搜索功能（？）。我正在看store.find，store.findBy，它可以使用一个函数store.findRecord等，但这些函数看起来非常一个。我需要去Tabs节点，用'Tab1'的'Name'找到它的子'Tab'，并找到它的属性'Title'的值...正在使用描述node，但是是分层的json数据。我是否缺少这样做的商店功能，我应该使用商店的原始json数据 - json是否有更好的搜索功能，还是通过循环遍历所有的节点来恢复暴力的javascript？我希望避免循环并发现某种功能。和往常一样，tia
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
推荐答案
嗯，从我们的意见中我了解到，你需要一种存储来访问你的 JSON 数据尽可能快捷方便。
JSON意味着JavaScript对象符号，所以它是一个对象！
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!
好的，我给你两个例子。
首先，设置JSON数据：
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:
第一种方式：我们可以将上述JSON保存到名为 nested-json.json 的文件中，我们用简单的商店。比较，我们可以使用 findBy 搜索找到我们需要的：
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'));
}
}
});
另一种方法是将上述JSON 设想为对象，读取直接从原始的JSON数据。此时，只需将其作为JavaScript对象：
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);
});
});
});
这是一个 jsfiddle 来测试最后一个： jsfiddle
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 ;)
这篇关于extjs深入搜索商店数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
