I want to read a particular value of an extjs data store and manipulate it locally. Response xml looks like :
<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.
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'.
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
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/
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:
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With