Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to read extjs data store

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

like image 901
Vaidehi Patel Avatar asked Oct 25 '25 05:10

Vaidehi Patel


1 Answers

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>
like image 144
lontivero Avatar answered Oct 26 '25 17:10

lontivero



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!