Javascript 如何读取extjs数据存储
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13734452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to read extjs data store
提问by Vaidehi Patel
I want to read a particular value of an extjs data store and manipulate it locally. Response xml looks like :
我想读取 extjs 数据存储的特定值并在本地操作它。响应 xml 看起来像：
<user><name>abc</name><surname>def</surname><book><bname>book1</bname></book></user>
My store will have just one user entry when response is received and i want to read 'bname' value. So far i have tried two approaches and both giving error.
收到响应时，我的商店将只有一个用户条目，我想读取“bname”值。到目前为止，我已经尝试了两种方法，并且都给出了错误。
approach1:
方法一：
Ext.define('user', {
extend: 'Ext.data.Model',
fields: [ 'name', 'surname'],
hasMany: {model: 'Book', name: 'book'},
proxy: {
type: 'rest',
url : request,
reader: { type: 'json', root: 'user'}
}
});
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [ 'name'],
belongsTo: 'user'
});
var userstore = Ext.create('Ext.data.Store', {
model: "user"
});
incidentstore.load({
callback: function() {
var inc = userstore.first();
var bk = inc.getBook();
console.log(dev.get('bname'));
}
});
Running above code gives error that 'Ext.define is not a function'.
运行上面的代码会给出“Ext.define 不是函数”的错误。
Approach2:
方法二：
var proxy1 = new Jx.JxHttpProxyRest({
url: request,
api : {
read : { headers : { 'Accept' : APP + '.abc.def.usermanage.user+json;version=1' } }
}
});
var reader = new Ext.data.XmlReader( {
rootProperty : 'user',
record : 'book',
id : 'id',
}, [{ name : 'bname', mapping : 'book > bname'} ]);
var writer = new Ext.data.XmlWriter( {
encode : false
});
var newstore = new Ext.data.Store( {
id : 'book',
restful : true,
proxy : proxy1,
remoteSort : true,
reader : reader,
writer : writer,
autoload: true,
listeners: {
load: function() {
console.log(newstore.data.first());
}
}
});
Ext.data.DataProxy.addListener('load', function(proxy, type, action, options, res) {
console.log(res.responseText);
});
newstore.load( {
params : { start : 0, limit : myPageSize },
});
Above code does not display anything on console.
上面的代码在控制台上不显示任何内容。
I am new to extjs and not sure how i can access 'bname' value from response. It would be great if someone can help
我是 extjs 的新手，不确定如何从响应中访问“bname”值。如果有人可以提供帮助，那就太好了
采纳答案by Vaidehi Patel
Below code worked for me :
下面的代码对我有用：
var newproxy = new Ext4.data.proxy.Rest({
url : request,
headers : {
},
reader : {
type : 'json',
root : 'user.book'
}});
// Typical Store collecting the Proxy, Reader and Writer together.
var newstore = Ext4.create('Ext4.data.Store', {
id : 'book',
fields: ['bname'],
restful : true, // <-- This Store is RESTful
autoLoad : true,
proxy : newproxy
});
var book;
newstore.load();
newstore.each(function(rec) {
book= rec.get('bname');
});
回答by lontivero
Take a look at this:
看看这个：
// The user model definition
Ext.define('user', {
extend: 'Ext.data.Model',
fields: [ 'name', 'surname', 'book' ]
});
// The store instance
var userstore = Ext.create('Ext.data.Store', {
model: 'user',
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: 'user',
root: 'users'
}
}
});
// data sample to test the approach
mydata =
[
['Juan', 'Alonso', [ { bname: 'El loco' }, { bname: 'El cuerdo' } ]],
['Susana', 'Cabrera', [ { bname: 'Adios a las palomas' }]]
];
// load the store with the sample data
userstore.loadData(mydata, false);
// display the first book for the first record
var firstRecord = userstore.getAt(0);
var firstBook = firstRecord.get('book')[0];
alert(firstBook.bname )
?Or see the working code here: http://jsfiddle.net/lontivero/HTj5Q/
?或者在这里查看工作代码：http: //jsfiddle.net/lontivero/HTj5Q/
As you can see, it works fine. However, if your store will have 'always' just one record, then you shouldn′t use a store, you should use a model and load the model.
如您所见，它运行良好。但是，如果您的商店“始终”只有一条记录，那么您不应该使用商店，而应该使用模型并加载模型。
UPDATE:
更新：
Ok, if you are using extjs 3.1.1 (it would be good to gave such important information before) you can do it as follow:
好的，如果您使用的是 extjs 3.1.1（之前提供如此重要的信息会很好），您可以按以下方式进行：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>For extjs 3.1.1</title>
<script src="http://extjs-public.googlecode.com/svn/tags/extjs-3.1.1/release/adapter/ext/ext-base.js" type="text/javascript" ></script>
<script src="http://extjs-public.googlecode.com/svn/tags/extjs-3.1.1/release/ext-all.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
// The store instance
var userstore = new Ext.data.ArrayStore({
fields: ['name', 'surname', 'book'],
reader: new Ext.data.ArrayReader({
idIndex: 0 // id for each record will be the first element
})
});
// data sample to test the approach
mydata =
[
['Juan', 'Alonso', [ { bname: 'El loco' }, { bname: 'El cuerdo' } ]],
['Susana', 'Cabrera', [ { bname: 'Adios a las palomas' }]]
];
// load the store with the sample data
userstore.loadData(mydata, false);
// display the first book for the first record
var firstRecord = userstore.getAt(0);
var firstBook = firstRecord.get('book')[0];
alert(firstBook.bname );
});
</script>
</body>
</html>
回答by Izhaki
You are using Ext version 4 code, but your library is 3.1.1
您使用的是 Ext 版本 4 代码，但您的库是 3.1.1
It simply wouldn't work unless you upgrade your library to version 4.
除非您将库升级到版本 4，否则它根本无法工作。
回答by Johan Van de Merwe
To make the sample of Lontivero complete, it is also useful to find a record on a specific key with the findRecord method. As the sample shows below (based on the sample of lontivero), it will only get the first found record. So this is very useful if you work with a store with a unique key.
为了使 Lontivero 的示例完整，使用 findRecord 方法查找特定键上的记录也很有用。如下图所示（基于lontivero的样本），它只会得到第一个找到的记录。因此，如果您使用具有唯一键的商店，这将非常有用。
You can see this sample live at: http://jsfiddle.net/jvandemerwe/dGUGb/25/
您可以在以下位置实时查看此示例：http: //jsfiddle.net/jvandemerwe/dGUGb/25/
// The user model definition
Ext.define('user', {
extend: 'Ext.data.Model',
fields: [ 'name', 'surname', 'book' ]
});
// The store instance
var userstore = Ext.create('Ext.data.Store', {
model: 'user',
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: 'user',
root: 'users'
}
}
});
// data sample to test the approach
mydata =
[
['Juan', 'Alonso', [ { bname: 'El loco' }, { bname: 'El cuerdo' } ]],
['Juan', 'Lopez', [ { bname: 'Superdooper' }, { bname: 'Swinglist' } ]],
['Susana', 'Cabrera', [ { bname: 'Adios a las palomas' }]]
];
// load the store with the sample data
userstore.loadData(mydata, false);
// Finds the first!!! matching Record in this store by a specific field value.
// API info: findRecord( fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] )
var keyToFind = 'Juan';
var found = userstore.findRecord('name', keyToFind, 0, false, false, true);
if (found != null) {
var list = '';
var author = found.get('name')+' '+ found.get('surname');
var books = found.get('book');
Ext.each(books, function(book, idx) {
if (list != '') list = list + ', ';
list = list+book.bname;
});
alert('Books of '+author+'\n'+list);
} else {
alert('no books with key \''+keyToFind+'\'');
}
回答by zloctb
var departmentStore = Ext.create('Ext.data.Store', {
fields : [
'name',
'active',
'dateActive',
'dateInactive',
'description',
'director',
'numEmployees',
{
name : 'id',
type : 'int'
}
],
proxy : {
type : 'ajax',
url : 'data.json',
reader : {
type : 'json',
root : 'data',
idProperty : 'id',
//successProperty : 'meta.success' //???
}
}
});
departmentStore.load({
callback : function(records, operation, successful) {
if (successful) {
console.log('department name:',
records[0].get('name'));
}
else {
console.log('the server reported an error');
}
}
});
